Skip to content

Instantly share code, notes, and snippets.

@amielucha

amielucha/svg-in-css.scss

Last active May 3, 2016 14:48
Show Gist options
  • Save amielucha/66dd51ecdc2429e787c3 to your computer and use it in GitHub Desktop.
Save amielucha/66dd51ecdc2429e787c3 to your computer and use it in GitHub Desktop.
Download ZIP
Embed SVG in CSS
Raw
svg-in-css.scss
/* Line breaks work as long as you escape them; use %23 instead of # inside of the svg */
.image {
position: absolute;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf-8, \
<svg width="300px" height="300px" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">\
<g stroke-width="4" stroke="%23eaeae1" fill="%23fff"> \
<polygon points="150 205 85.3436222 238.991869 97.6918916 166.995935 45.3837832 116.008131 117.671811 105.504065 150 40 182.328189 105.504065 254.616217 116.008131 202.308108 166.995935 214.656378 238.991869 "></polygon>\
</g>\
</svg>');
background-color: #003366;
background-size: 50px;
}
//
// Examples of various shapes
//
// white upwards triangle
.with-triangle {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='10'><polygon fill='white' points='10,3 0,10 20,10' /></svg>");
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment