Here are some notes taken from my CSS and SVG tests:
Inserting a SVG document in a web page
Inserting a SVG document through the
objectelement works well in all supporting browsers. Instead, using the
imgelement works only in Safari.
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
svgblocks when embed in a (X)HTML or XML document.
Certain SVG elements, such as
desccannot be rendered on the page. They work in the same way as the elements contained inside the (X)HTML
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:
For positioning, we should always work on the entire
svgblock. Applying positioning styles on its descendants doesn't work.
The 'text' element
textelement accepts only font-related properties (
font-weightetc.). Opera needs also
'font-size: 1em'. Otherwise, the text is showed in a smaller font size.
The 'svg' element and the box model
svgelement accepts borders, background properties and padding. In order to apply also margins, this element must be turned into a block box.
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
svgelement (and its descendants) as normal XML elements, as shown in the following picture ( box-model-fonts-000.xml).
Not working styles
Applying the following styles to a
polygonelement doesn't work. We should use inline styles instead.