Styling SVG Graphics

We continue to study SVG graphics, this time we will touch on stylization.
Part One: Introducing SVG Graphics .



Demonstration / Download source

Changing the appearance of SVG-elements similar to HTML, with some features. For example, the background is assigned by the fill property , not background-color, the border is stroke instead of border. If you worked with Adobe Illustrator, similar terminology will be familiar.




According to the official SVG specification,  properties can be added directly to tags. For example, fill and stroke for a rect element:

Also, properties can be added as a style. In the example, the CSS3 transform property was added to fill and stroke :

Since SVG is based on XML markup, the style in the .svg document must be enclosed in CDATA, otherwise the design will conflict with XML parsers. In the example, the hover effect is added:

In the .svg document, external styles are connected in a slightly different way:

SVG elements can be grouped using the g tag, then general styles can be applied:

That's all the highlights of SVG styling. A bonus is a little useful reading:

• Official Style Information at w3.org
• Good alignedleft.com Blog Examples
• Original examples at hongkiat.com