Notes on CSS and SVG tests

Here are some notes taken from my CSS and SVG tests:

Notes:

  1. Inserting a SVG document in a web page

    Inserting a SVG document through the object element works well in all supporting browsers. Instead, using the img element works only in Safari.

  2. Styling SVG documents

    There's no way to apply CSS 2.1 styles directly to a SVG document (see SVG specifications ). On the contrary, we can work on svg blocks when embed in a (X)HTML or XML document.

  3. Hidden elements

    Certain SVG elements, such as title and desc cannot be rendered on the page. They work in the same way as the elements contained inside the (X)HTML head element.

  4. Using a SVG document as a background image

    Supporting browsers don't allow a SVG document to be used as a background image of an element. So the following code won't work:

    1. element {
    2. background-image: url("file.svg");
    3. }
  5. Positioning

    For positioning, we should always work on the entire svg block. Applying positioning styles on its descendants doesn't work.

  6. The 'text' element

    The text element accepts only font-related properties (font-family, font-weight etc.). Opera needs also 'font-size: 1em'. Otherwise, the text is showed in a smaller font size.

  7. The 'svg' element and the box model

    The svg element accepts borders, background properties and padding. In order to apply also margins, this element must be turned into a block box.

  8. Although Opera and Safari don't support XLink per se, in the case of a SVG document they honor the specified linking (see image-000.xml as testcase).

  9. Internet Explorer's support

    Internet Explorer 7 (and lower) doesn't support SVG. However, when a SVG fragment is embedded in a XML file and there are some CSS styles applied to it, Internet Explorer 7 honors the specified styles, treating the svg element (and its descendants) as normal XML elements, as shown in the following picture ( box-model-fonts-000.xml).

    Internet Explorer 7 and SVG
  10. Not working styles

    Applying the following styles to a polygon element doesn't work. We should use inline styles instead.

    1. polygon {
    2. filter: url(value);
    3. stroke: value;
    4. stroke-width: value;
    5. stroke-opacity: value;
    6. fill: value;
    7. fill-opacity: value;
    8. }

    See complex-000.xml.

2 thoughts on “Notes on CSS and SVG tests”

Leave a Reply

Note: Only a member of this blog may post a comment.