8

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,624
  • 3
  • 43
  • 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

-3

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
  • 117
  • 6
  • This is mentioned in the question as not wanted because then you could only use it in one place. – Persijn Apr 23 '15 at 09:47
  • 3
    But you could use the css class on multiple elements. Like this: https://jsfiddle.net/2wjax28a/1/ – Ralf Zimmermann Apr 23 '15 at 09:50
  • your answer is almost OK apart that the encoding is wrong. I’m not saying that it doesn’t work, just that it is considered unsafe. You have to escape the LT and GT characters, and also the utf-8 keyword may we incorrect. See this excellent article: https://codepen.io/tigt/post/optimizing-svgs-in-data-uris – Jean-Michel M. Feb 17 '23 at 06:56