Notes on CSS and SVG tests

Table of contents

1. Inserting a SVG document in a web page
2. Styling SVG documents
3. Hidden elements
4. Using a SVG document as a background image
5. Positioning
6. The 'text' element
7. The 'svg' element and the box model
8. XLink support
9. Internet Explorer's support
10. Not working styles

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. XLink support

   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).

   

   Figure 1. Internet Explorer 7 shows the SVG elements as normal, stylized XML elements

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.