Styling SVG Sucks So Far

I'm currently working on a site that I'd like to make use of SVGs with, but I've ran into an issue.

The site's a long one page scroller and has multiple complex SVGs.

I started by adding in SVG elements to the index.html file, but I soon ended up with a huge file to manage. Some of the SVG code is around the 200 line mark. So I opted to create <div class="svg-mysvg"></div> then use CSS to add the SVG in as a background image making the file much more manageable.

1
2
3
4
.svg-mysvg {
background: url(../svg/mysvg.svg) no-repeat;
}

However, herein lies a problem:

Adding an SVG as a background image means the SVG isn't part of the dom so we lose styling.

For example with an SVG element in the dom, we can simply change the colour with fill in CSS as Chris Coyier demonstrates:

See the Pen SVG with Filters by Chris Coyier (@chriscoyier) on CodePen.

I suggested perhaps something along these lines:

1
2
3
4
5
6
7
8
9
10
11
.svg {
background: url(svg.svg);
}
.svg1 {
svg-fill: red;
svg-stroke: #000;
}
.svg2 {
svg-fill: #000;
svg-stroke: red;
}

But as Chris Coyier points out:

This could get confusing with SVG sub-elements.

I've also tried using the object tag, but this also doesn't seem to work:

See the Pen HeFIu by Simon Owen (@s10wen) on CodePen.

The ideal solution I'm looking for:

  • Rather than embed 100s of lines for each SVG, have a one liner that calls to a separate SVG file.
  • Have full control over styling with CSS.

Hopefully I'm missing something, but so far I haven't found a great solution.

I'd love to hear anyone else's thoughts on this.

Feedback

Thanks for the feedback folks!


Like this post? Hire Me!