7

I'm trying to link background: url(#myid);, the id would be to an SVG element.

<svg id="myid"></svg>

Is this even possible? Am I doing something wrong?

.spesial {
  width: 100px;
  height: 100px;
  background-image: url(#test);
}
<svg id="test" xmlns="http://www.w3.org/2000/svg" width=100 height=100 viewbox="0 0 1500 1500">
  <metadata>Copyright (C) 2015 by original authors @ fontello.com</metadata>
  <path transform="translate(0 500)" stroke="#a4e" d="m929 11v428q-18-20-39-37-149-114-238-188-28-24-46-38t-48-27-57-13h-2q-26 0-57 13t-48 27-46 38q-88 74-238 188-21 17-39 37v-428q0-8 6-13t12-5h822q7 0 12 5t6 13z m0 586v14t-1 7-1 7-3 5-5 4-8 2h-822q-7 0-12-6t-6-12q0-94 82-159 108-85 224-177 4-2 20-16t25-21 25-18 28-15 24-5h2q11 0 24 5t28 15 25 18 25 21 20 16q116 92 224 177 30 24 56 65t26 73z m71 21v-607q0-37-26-63t-63-27h-822q-36 0-63 27t-26 63v607q0 37 26 63t63 26h822q37 0 63-26t26-63z"
  />
</svg>
<div class="spesial">
  Should there not be a background image here?
</div>

I know that I can set all the data in the link, but then I would not be able to reuse it. URL
And <image href="pic.svg" then my CSS styles would have to be inline.

Persijn
  • 14,184
  • 3
  • 41
  • 72
  • 1
    [CSS Background-image](http://www.w3schools.com/cssref/pr_background-image.asp) value can only be URL. It could maybe work if your html file name was for example: 'my_file.html', than if there is a hash as: 'my_file.html#test' you output the image itself only, than you could use it in css as an URL. – skobaljic Apr 23 '15 at 09:28
  • Just save your svg image in images folder and use it inside your css file as any other image. What you will probably also need to use is [background-size](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size) property. – skobaljic Apr 23 '15 at 09:36
  • If you want to reuse the SVG, the only solution I can think of is to save it to a separate file and reference to it in the background property. – Raphael Müller Apr 23 '15 at 09:37
  • I know I can put it in a separate file (as mentioned in the question), but why can't I link it when inside the html? as far is a can see in the inspector the image is linked but not displayed? – Persijn Apr 23 '15 at 09:52

1 Answers1

0

You can also include the svg as base64 encode directly in the css and reuse the css-class.

.spesial { background: url("data:image/svg+xml;utf8,<svg...

https://jsfiddle.net/2wjax28a/

Ralf Zimmermann
  • 113
  • 6