SVG: Styling with CSS

SVG is essentiall can be styled like any other HTML elements, and this demo shows how to add the styles.

This rectangle is affected by the presentation attributes

<svg>
<rect width="200" height="200" fill="slategrey" stroke="black" stroke-width="3"/>
</svg>

This rectangle is affected by the inline styles

<svg>
<rect x="203" width="200" height="200" style="fill:slategrey; stroke:black; stroke-width:3; -webkit-transform: rotate(45deg);"/>
</svg>

This rectangle is affected by the internal styles; Hover over it.

<svg>
<rect width="200" height="200"/>
</svg>

The elements below are affected by the styles on <g> element.

<svg>
<g style="fill:slategrey; stroke:black; stroke-width:3; fill-opacity: 0.5;">
<rect x="203" width="200" height="200"/>
<circle cx="120" cy="106" r="100"/>
</g>
</svg>