4

I have around 30 PNG icons which I want to embed in my D3.js graphic within an SVG element. Up to now I have been loading all images(pngs) separately.

goal: Now i want to use one sprite instead. How can I do this in the best way?

I converted my icons in a sprite by using some free online sprite creator and got additionaly to my sprite a css code wich looks like this:

container li {
background: url("../images/somePng.png") no-repeat top left;
}

.sprite-icon_1{ background-position: 0 0; width: 40px; height: 40px; }
.sprite-icon_2{ background-position: 0 -90px; width: 40px; height: 40px; }
                  ...   ...   ...
.sprite-icon_3{ background-position: 0 -180px; width: 40px; height: 40px; }

I really tried to find information about that in the web but could not find a suitable way. I don't care about how to get to the goal, as long as i don't have to type the position coordinates myself, it needs to much time or the images have a different positioning/scaling behavior than normal separately loaded svg-image elements.

I am thankful for all help!

Seb Waynee
  • 325
  • 1
  • 2
  • 12
  • 1
    how is this not working? what exactly is the problem? – Marc B Dec 17 '14 at 19:20
  • I never used sprites before. I just don't know how to do it. I tried to add an image element to my SVG and give it the "container" and "sprite-icon_1" class but that does not work out of the box. – Seb Waynee Dec 17 '14 at 19:30
  • I think the problem is that i do not know how i can connect the svg:image element with the generated css code above so that my image is displayed. Up to know i gave the svg:image element an attribute with the name "href" and wrote the image url behind. But now somehow this URL is in css and attached to the background property. And the sprite positioning is in an different css class. I do not know how to deal with this right now. – Seb Waynee Dec 17 '14 at 19:48
  • You can't use background/background position for positioning images within SVG elements. This [question and answer describe how to clip images within SVG to use a sprite sheet](http://stackoverflow.com/q/21193447/3128209). – AmeliaBR Dec 17 '14 at 23:15
  • Thank you very much for this information. It helps me a lot. You could add it as an answer. Is there a (free) sprite generator which is able to return an array of the positions instead of the css code (so that i can dynamically create the clip-paths)? – Seb Waynee Dec 19 '14 at 21:18

0 Answers0