Стили для SVG - демонстрация

Прямоугольник формируется презентационными атрибутами

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

Прямоугольник формируется встроенными стилями

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

Данный прямоугольник формируется внутренними стилями страницы. Наведите курсор мыши на него.

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

Ниже привденные элементы формируются стилями элемента <g>.

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