Moving to SVG icons - how to separate them from th

Question

SVG icons have some advantages over font icons: they can be scaled to fit a variable-sized container element, and you can theoretically change color of individual paths. I also like the fact that I can easily make them in Inkscape :P

But how do I move the SVG in the CSS file so they can be reused on the same page, like icon fonts, and still benefit from these advantages?

The background property supports SVG, with background: url(#svg_element), but that means I have to put the SVG in the HTML :| If I put it as a "data" string, how do I change path colors in the same css file?

Answer 1

For in-depth discussion, check out Sara Soueidan who has done a lot of work on SVG. A recent article/talk she gave may also have lots of info for you to digest.

Chris Coyer has some very useful things to say too.

Answer 2

I've worked with SVG before but not with SVG icons specifically. However based on the knowledge I have and doing some looking around, here is what I came up with (I might not have understood your question fully in that case please post more questions).

But how do I move the SVG in the CSS file so they can be reused on the same page

but that means I have to put the SVG in the HTML

SVG is basically XML, so not exactly sure why you prefer not to put SVG in HTML file. If you put SVG in HTML file you could just use external or internal CSS to style SVG. Here is a sample to just do that.

In HTML file:

<circle cx="100" cy="100" r="75" />

In a CSS file: (Include CSS file in you HTML file)

<style>
circle {
  fill: deepPink;
  transition: fill .3s ease-out;
}

circle:hover {
  fill: #009966;
}
</style>

Here is the second option of many other, use <img/> tag. Here is an article which explains how to use SVG from a separate file using <img/>tag. And here is the code accompanying it. Also note that it uses jQuery plugin svginject.

Here are few other options to keep SVG out of HTML and their merits.

Hope this helps.

Answer 3

It seems you wanna keep away xml contents of svg file from html codes.

To meet this, Two scenarios are available to embed svg files into the html:

1. Using <object data="~/img/file.svg" type="image/svg+xml"></object> element, So xml will be separated from html ==> the resulted view would be combination of html and xml that can be styled with css (perhaps a scoped one e.g. using <style scoped="scoped"></style> at the target page).
2. using <img src="~/img/file.svg"/> element, So xml will be separated from html ==> the resulted view would be only html and css can't perform on xml contents of svg file.

Another way to employ svg is to use inline technique, say, using <svg> tag so you can use inline stylesheets too for this, But you wanna separate xml from html here:)

For more information: Using SVG and SVG Styling with CSS.

Answer 4

But how do I move the SVG in the CSS file so they can be reused on the same page, like icon fonts, and still benefit from these advantages?

With svg templates

Lets create a svg template.

Template (html)

<svg width="100px" height="100px" viewBox="0 0 100 100" class="hide">
    <circle id="circle-tmp" cx="50" cy="50" r="50" />
</svg>

Its a template so we hide it. (but still in the DOM)

.hide { display: none;} //css

Use (html)

<svg viewBox="0 0 100 100" class="circle-first">
    <use xlink:href="#circle-tmp" />
</svg>

This can be reused anywhere on the page.

how do I change path colors in the same css file?

Easy, just style it!

css

.circle-first {
    fill: #12bb34;
}

Working example? Here you go: Fiddle

Browser support? Not 100% sure, but svg support in all big browsers: CanIUseIt

Answer 5

You could also do some digging into the evil-icons project. You'll find out some neat ways of using svg.

Their nicest idea is to merge all of your icons into a single file "sprite.svg". Each of your svg icons needs to be enclosed by a <symbol> tag with an id. Then you access it whenever you need through an xlink, as commented in other answers.

By loading the entire sprite.svg you'll gain in load time and neatness.

Answer 6

If you use SVG as background image then you cannot alter path and fill colors (AFAIK). However, you can use white SVG and background colors to create Metro-ish icons. This is exactly what jQuery Mobile theming system does.

.icon {
  display: inline-block;
  width: 80px;
  height: 80px;
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
}
.icon-1 {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20style%3D%22fill%3A%23FFFFFF%3B%22%20points%3D%2214%2C5%209%2C5%207%2C0%205%2C5%200%2C5%204%2C8%202.625%2C13%207%2C10%2011.375%2C13%2010%2C8%20%22%2F%3E%3C%2Fsvg%3E");
}
.icon-bg-1 {
  background-color: #800080;
}
.icon-bg-2 {
  background-color: #DB7093;
}
.icon-bg-3 {
  background-color: #CD853F;
}
.icon-bg-4 {
  background-color: #B0E0E6;
}

<span class="icon icon-1 icon-bg-1"></span>
<span class="icon icon-1 icon-bg-2"></span>
<span class="icon icon-1 icon-bg-3"></span>
<span class="icon icon-1 icon-bg-4"></span>

Another option is to use a colored SVG and use CSS3 hue-rotate filter to change the color of SVG. This property is not widely supported yet.

Note: Hue rotation only affects "colors"; black, white and gray remain unaffected.

.icon {
  display: inline-block;
  width: 80px;
  height: 80px;
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #EEEEEE;
}
.icon-1 {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20style%3D%22fill%3A%23FF0000%3B%22%20points%3D%2214%2C5%209%2C5%207%2C0%205%2C5%200%2C5%204%2C8%202.625%2C13%207%2C10%2011.375%2C13%2010%2C8%20%22%2F%3E%3C%2Fsvg%3E");
}
.icon-hue-1 {
  -webkit-filter: hue-rotate(0deg);
     -moz-filter: hue-rotate(0deg);
          filter: hue-rotate(0deg);
}
.icon-hue-2 {
  -webkit-filter: hue-rotate(90deg);
  -moz-filter: hue-rotate(90deg);
  filter: hue-rotate(90deg);
}
.icon-hue-3 {
  -webkit-filter: hue-rotate(180deg);
     -moz-filter: hue-rotate(180deg);
          filter: hue-rotate(180deg);
}
.icon-hue-4 {
  -webkit-filter: hue-rotate(270deg);
     -moz-filter: hue-rotate(270deg);
          filter: hue-rotate(270deg);
}

<span class="icon icon-1 icon-hue-1"></span>
<span class="icon icon-1 icon-hue-2"></span>
<span class="icon icon-1 icon-hue-3"></span>
<span class="icon icon-1 icon-hue-4"></span>