SVG + CSS - how to include in HTML and scale & color?

Question

I ma trying to understand how to include a SVG as a class and manipulate it via CSS for hover etc.

I got the following svg example from icomoon. The purpose is to avoid a number of http requests in a page and include as much icon information into a CSS using class.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" viewBox="0 0 512 512"><g id="icomoon-ignore">
</g>
<path d="M192 232c0 13.2-10.8 24-24 24h-48c-13.2 0-24-10.8-24-24v-48c0-13.2 10.8-24 24-24h48c13.2 0 24 10.8 24 24v48z"></path>
<path d="M352 232c0 13.2-10.8 24-24 24h-48c-13.2 0-24-10.8-24-24v-48c0-13.2 10.8-24 24-24h48c13.2 0 24 10.8 24 24v48z"></path>
<path d="M192 392c0 13.2-10.8 24-24 24h-48c-13.2 0-24-10.8-24-24v-48c0-13.2 10.8-24 24-24h48c13.2 0 24 10.8 24 24v48z"></path>
<path d="M352 392c0 13.2-10.8 24-24 24h-48c-13.2 0-24-10.8-24-24v-48c0-13.2 10.8-24 24-24h48c13.2 0 24 10.8 24 24v48z"></path>
<path d="M456.041 80l55.959-55.958v-24.042h-24.041l-55.959 55.958-55.959-55.958h-24.041v24.042l55.959 55.958-55.959 55.958v24.042h24.041l55.959-55.958 55.959 55.958h24.041v-24.042z"></path>
<path d="M0 384h32v64h-32v-64z"></path>
<path d="M0 288h32v64h-32v-64z"></path>
<path d="M416 224h32v64h-32v-64z"></path>
<path d="M416 416h32v64h-32v-64z"></path>
<path d="M416 320h32v64h-32v-64z"></path>
<path d="M0 192h32v64h-32v-64z"></path>
<path d="M0 96h32v64h-32v-64z"></path>
<path d="M256 64h64v32h-64v-32z"></path>
<path d="M160 64h64v32h-64v-32z"></path>
<path d="M64 64h64v32h-64v-32z"></path>
<path d="M224 480h64v32h-64v-32z"></path>
<path d="M320 480h64v32h-64v-32z"></path>
<path d="M128 480h64v32h-64v-32z"></path>
<path d="M32 480h64v32h-64v-32z"></path>
</svg>

I know from codepen example that if I just include it as a html code - it will work. (http://codepen.io/anon/pen/epvLgO)

But what I want to do is something like

.icon {
     <insert the contents of the svg file here>
}

.icon:hover {
fill: red ;
}

and then in html do something like

<span class="icon"></span>

also - for this icon - how can I change the size on the fly for various medias ?

meaning

if iphone, I want to set the icon size differently...

.icon {
width: 32px;
heigh: 32px;
}

thanks.. (this is to see how I can reduce the total number of http call - by using SVG and CSS)

This might help you, although it doesn't cut down on HTTP requests: http://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement/11978996 — Drew Baker, Oct 04 '15 at 05:05
I think you've painted yourself into a corner here. You could make the SVG a background image and embed it into the CSS as a data URI but if you did that you can't change the fill on hover. If you just wanted to make it less opaque on hover that would be doable. — Robert Longson, Oct 04 '15 at 08:16
I suppose you could use a different red image on hover though. You'd have the image data twice though which would double the bandwidth required. — Robert Longson, Oct 04 '15 at 08:20

score 1 · Accepted Answer · edited May 23 '17 at 10:26

You can put your SVG code in CSS like this:

.icon {
  display:inline-block;
  width: 100px;
  height: 100px;
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 512 512"><path d="M192 232c0 13.2-10.8 24-24 24h-48c-13.2 0-24-10.8-24-24v-48c0-13.2 10.8-24 24-24h48c13.2 0 24 10.8 24 24v48z"></path><path d="M352 232c0 13.2-10.8 24-24 24h-48c-13.2 0-24-10.8-24-24v-48c0-13.2 10.8-24 24-24h48c13.2 0 24 10.8 24 24v48z"></path><path d="M192 392c0 13.2-10.8 24-24 24h-48c-13.2 0-24-10.8-24-24v-48c0-13.2 10.8-24 24-24h48c13.2 0 24 10.8 24 24v48z"></path><path d="M352 392c0 13.2-10.8 24-24 24h-48c-13.2 0-24-10.8-24-24v-48c0-13.2 10.8-24 24-24h48c13.2 0 24 10.8 24 24v48z"></path><path d="M456.041 80l55.959-55.958v-24.042h-24.041l-55.959 55.958-55.959-55.958h-24.041v24.042l55.959 55.958-55.959 55.958v24.042h24.041l55.959-55.958 55.959 55.958h24.041v-24.042z"></path><path d="M0 384h32v64h-32v-64z"></path><path d="M0 288h32v64h-32v-64z"></path><path d="M416 224h32v64h-32v-64z"></path><path d="M416 416h32v64h-32v-64z"></path><path d="M416 320h32v64h-32v-64z"></path><path d="M0 192h32v64h-32v-64z"></path><path d="M0 96h32v64h-32v-64z"></path><path d="M256 64h64v32h-64v-32z"></path><path d="M160 64h64v32h-64v-32z"></path><path d="M64 64h64v32h-64v-32z"></path><path d="M224 480h64v32h-64v-32z"></path><path d="M320 480h64v32h-64v-32z"></path><path d="M128 480h64v32h-64v-32z"></path><path d="M32 480h64v32h-64v-32z"></path></svg>')
}

but then you cannot change its style becuase the svg isn’t DOM object.

You can just put SVG codes inside span tag like this:

HTML

<span class="icon">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 512 512">
    <path d="M192 232c0 13.2-10.8 24-24 24h-48c-13.2 0-24-10.8-24-24v-48c0-13.2 10.8-24 24-24h48c13.2 0 24 10.8 24 24v48z"></path>
    <path d="M352 232c0 13.2-10.8 24-24 24h-48c-13.2 0-24-10.8-24-24v-48c0-13.2 10.8-24 24-24h48c13.2 0 24 10.8 24 24v48z"></path>
    <path d="M192 392c0 13.2-10.8 24-24 24h-48c-13.2 0-24-10.8-24-24v-48c0-13.2 10.8-24 24-24h48c13.2 0 24 10.8 24 24v48z"></path>
    <path d="M352 392c0 13.2-10.8 24-24 24h-48c-13.2 0-24-10.8-24-24v-48c0-13.2 10.8-24 24-24h48c13.2 0 24 10.8 24 24v48z"></path>
    <path d="M456.041 80l55.959-55.958v-24.042h-24.041l-55.959 55.958-55.959-55.958h-24.041v24.042l55.959 55.958-55.959 55.958v24.042h24.041l55.959-55.958 55.959 55.958h24.041v-24.042z"></path>
    <path d="M0 384h32v64h-32v-64z"></path>
    <path d="M0 288h32v64h-32v-64z"></path><path d="M416 224h32v64h-32v-64z"></path>
    <path d="M416 416h32v64h-32v-64z"></path>
    <path d="M416 320h32v64h-32v-64z"></path>
    <path d="M0 192h32v64h-32v-64z"></path>
    <path d="M0 96h32v64h-32v-64z"></path>
    <path d="M256 64h64v32h-64v-32z"></path>
    <path d="M160 64h64v32h-64v-32z"></path>
    <path d="M64 64h64v32h-64v-32z"></path>
    <path d="M224 480h64v32h-64v-32z"></path>
    <path d="M320 480h64v32h-64v-32z"></path>
    <path d="M128 480h64v32h-64v-32z"></path>
    <path d="M32 480h64v32h-64v-32z"></path>
  </svg>
</span>

CSS

.icon {
  display:inline-block;
  width: 100px;
  height: 100px;
}
.icon:hover svg {
  fill: red;
}

if you really want to put SVG codes only in CSS:

.icon {
  display:inline-block;
  width: 100px;
  height: 100px;
  background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 512 512"><path d="M192 232c0 13.2-10.8 24-24 24h-48c-13.2 0-24-10.8-24-24v-48c0-13.2 10.8-24 24-24h48c13.2 0 24 10.8 24 24v48z"></path><path d="M352 232c0 13.2-10.8 24-24 24h-48c-13.2 0-24-10.8-24-24v-48c0-13.2 10.8-24 24-24h48c13.2 0 24 10.8 24 24v48z"></path><path d="M192 392c0 13.2-10.8 24-24 24h-48c-13.2 0-24-10.8-24-24v-48c0-13.2 10.8-24 24-24h48c13.2 0 24 10.8 24 24v48z"></path><path d="M352 392c0 13.2-10.8 24-24 24h-48c-13.2 0-24-10.8-24-24v-48c0-13.2 10.8-24 24-24h48c13.2 0 24 10.8 24 24v48z"></path><path d="M456.041 80l55.959-55.958v-24.042h-24.041l-55.959 55.958-55.959-55.958h-24.041v24.042l55.959 55.958-55.959 55.958v24.042h24.041l55.959-55.958 55.959 55.958h24.041v-24.042z"></path><path d="M0 384h32v64h-32v-64z"></path><path d="M0 288h32v64h-32v-64z"></path><path d="M416 224h32v64h-32v-64z"></path><path d="M416 416h32v64h-32v-64z"></path><path d="M416 320h32v64h-32v-64z"></path><path d="M0 192h32v64h-32v-64z"></path><path d="M0 96h32v64h-32v-64z"></path><path d="M256 64h64v32h-64v-32z"></path><path d="M160 64h64v32h-64v-32z"></path><path d="M64 64h64v32h-64v-32z"></path><path d="M224 480h64v32h-64v-32z"></path><path d="M320 480h64v32h-64v-32z"></path><path d="M128 480h64v32h-64v-32z"></path><path d="M32 480h64v32h-64v-32z"></path></svg>')
}
.icon:hover {
  background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 512 512" fill="red"><path d="M192 232c0 13.2-10.8 24-24 24h-48c-13.2 0-24-10.8-24-24v-48c0-13.2 10.8-24 24-24h48c13.2 0 24 10.8 24 24v48z"></path><path d="M352 232c0 13.2-10.8 24-24 24h-48c-13.2 0-24-10.8-24-24v-48c0-13.2 10.8-24 24-24h48c13.2 0 24 10.8 24 24v48z"></path><path d="M192 392c0 13.2-10.8 24-24 24h-48c-13.2 0-24-10.8-24-24v-48c0-13.2 10.8-24 24-24h48c13.2 0 24 10.8 24 24v48z"></path><path d="M352 392c0 13.2-10.8 24-24 24h-48c-13.2 0-24-10.8-24-24v-48c0-13.2 10.8-24 24-24h48c13.2 0 24 10.8 24 24v48z"></path><path d="M456.041 80l55.959-55.958v-24.042h-24.041l-55.959 55.958-55.959-55.958h-24.041v24.042l55.959 55.958-55.959 55.958v24.042h24.041l55.959-55.958 55.959 55.958h24.041v-24.042z"></path><path d="M0 384h32v64h-32v-64z"></path><path d="M0 288h32v64h-32v-64z"></path><path d="M416 224h32v64h-32v-64z"></path><path d="M416 416h32v64h-32v-64z"></path><path d="M416 320h32v64h-32v-64z"></path><path d="M0 192h32v64h-32v-64z"></path><path d="M0 96h32v64h-32v-64z"></path><path d="M256 64h64v32h-64v-32z"></path><path d="M160 64h64v32h-64v-32z"></path><path d="M64 64h64v32h-64v-32z"></path><path d="M224 480h64v32h-64v-32z"></path><path d="M320 480h64v32h-64v-32z"></path><path d="M128 480h64v32h-64v-32z"></path><path d="M32 480h64v32h-64v-32z"></path></svg>')
}

You can assign different style by screen sizes with media query. For example, if you want to target devices with screen width smaller than 480px:

@media screen and (max-width: 480px) {
  .icon {
    width: 32px;
    heigh: 32px;
  }
}

Of course you cannot distinguish between iPhone and Android with this method. If you have to, you should use javascripts. You can also check just if the device is touch enabled or not.

thanks- I think this is the closest I can create. doubling the bw - but reducing overall https request. — hypermails, Oct 04 '15 at 22:47

SVG + CSS - how to include in HTML and scale & color?

1 Answers1