It is possible to style your SVG shapes using CSS. By styling is meant
to change the looks of the shapes. This can be stroke color and width,
fill color, opacity and many other properties of your shapes.

There are 6 ways to style the shapes in your SVG images. Each will be
covered in this text. At the end of this text you will find a list of the CSS properties you can
use with SVG.

This text assumes that you are familiar with CSS. If you are not, I have
a CSS Tutorial available too, which explains CSS in the context
of HTML (where CSS is also used). The CSS properties for SVG elements are sometimes
different from the CSS properties of HTML elements, but the overall principles remain the same.

CSS Styling Using Attributes

Is it possible to style an SVG shape using specific style attributes like
stroke and fill. Here is an example:

<circle stroke="#000000" fill="#00ff00" />

There are a range of styling attributes available. However, it is recommended that
you use either inline style sheets or external style sheets, so I won't get into
too much detail about style attributes here.

Using the style Attribute and CSS Properties

This method doesn't use any style specific attributes. Instead it uses only the
style attribute and specifies CSS properties inside it. If you need
to embed style directly in a shape, this method is preferable to the specific
attributes, because you learn the names of the CSS properties. The CSS properties
are the same in an internal or external style sheet, so it is easier to copy-paste
and learn like this.

Here is the same circle with the stroke and fill set via the style
attribute and CSS properties:

<circle style="stroke: #000000; fill:#00ff00;" />

Using Inline Style Sheets

It is possible to define the styles for your shapes in an inline style
sheet, and then have all these styles automatically applied to your shapes.
Here is an example:

Notice how the style of the circle-element is defined inside the <style>-element.
This works the same way as in HTML and CSS.

Internal style sheets work fine in both Internet Explorer 7 and Firefox 3.0.5.

The class Attribute

Rather than applying a style to all shapes of a certain type (e.g. all circles), you can
use the class attribute in the shape to choose the styling of that
shape. Just like you would with the class attribute in an HTML element.

Here is an example of two styles for circles - a green and a red. Each of these two styles
are applied to each their own <circle>-elemement using the class
attribute:

Notice how the circle selector name in the style sheet has been suffixed
with .myGreen and .myRed. Now <circle>-elements
can refer to either the green or red circle style using either class="myGreen"
or class="myRed".

Using External Style Sheets

When you are using an external style sheet, the style sheet is put in a separate file
and put on your web server, just like with an external CSS file for HTML pages.
In addition, you need the following declaration in your SVG file, before the <svg>-element:

<?xml-stylesheet type="text/css" href="svg-stylesheet.css" ?>

This processing instruction tells the SVG viewer to use the CSS style sheet found the file "svg-stylesheet.css".

Here is an example where the declaration is being used inside an SVG file:

NOTE: External CSS style sheets seem to work fine in Internet Explorer 7, but not in Firefox 3.0.5.

Using a style sheet in the HTML page.

If you embed the SVG image inside an HTML page, you can also
embed the style sheet for the SVG image inside the HTML page.
Here is an example:

<html>
<body>
<style>
</style>
<svg>
</svg>
</body>
</html>

To add styles to the shapes inside the SVG image, just add regular CSS properties inside the style
element. You can style the SVG elements using the same CSS selectors you would normally use for HTML.
Here is an HTML page with a circle element styled via the CSS style sheet in the HTML page:

If you embed SVG images directly inside HTML pages, this is probably the easiest way to style
your SVG shapes.

Overriding Style Sheets Locally in Shapes

If you have styled a shape in a style sheet you can override this styling by setting new
styling properties locally inside the shapes you want new styles for. The styles set locally inside
the shape always has precedence over styles defined in internal or external style sheets.

SVG CSS Properties

SVG elements have the following CSS properties which you can set. Not all elements
have all of these CSS properties. Therefore the CSS properties are split into multiple
tables targeted at different elements.

Shape CSS properties

CSS properties for the path element and other shape elements:

CSS Property

Description

fill

Sets fill color of the shape.

fill-opacity

Sets fill opacity of the shape.

fill-rule

Sets fill rule of the shape.

marker

Sets marker used along the lines (edges) of this shape.

marker-start

Sets start marker used along the lines (edges) of this shape.

marker-mid

Sets mid marker used along the lines (edges) of this shape.

marker-end

Sets end marker used along the lines (edges) of this shape.

stroke

Sets the stroke (line) color used to draw the outline of this shape.

stroke-dasharray

Sets the stroke (line) dashing used to draw the outline of this shape.

stroke-dashoffset

Sets the stroke (line) dash offset used to draw the outline of this shape.

stroke-linecap

Sets the stroke (line) line cap used to draw the outline of this shape.
Valid values are round, butt and square.

stroke-miterlimit

Sets the stroke (line) miter limit used to draw the outline of this shape.

stroke-opacity

Sets the stroke (line) opacity used to draw the outline of this shape.

This website uses cookies to improve the user experience and gather statistics. Our advertisers use cookies too (3rd party cookies),
to provide more relevant ads. Continued use of this website implies that you accept the use of cookies on this
website.
We do not share our cookies with our advertisers, and our advertisers do not share
cookies with us.