Unleash the power of SVG sprites
Here at Webonomic we always liked SVG. We experimented with SVG and SVG background quite a few times, also creating some fancy animated backgrounds and other animations at the times Apple hadn’t even released Safari or thought about CSS transforms, transitions, and animations.
Unfortunately SVG has never been really embraced by the majority of browser vendors, only Opera was enthusiastic about it, probably because both Adobe (Flash) and Microsoft (Silverlight/ Vector Markup Language (VML) had their own standards and felt threatened by it. (Adobe doesn’t make browsers, but SVG support in their Creative Suits has never been impressive) Maybe that’s gonna change now with HTML5 and even Microsoft Explorer 9 support.
Using SVG as images was one thing, using it as a background image was even better.
Setting SVG images by using :target and ID’s
And now we stumbled upon this clever trick showing layered SVG images by setting the hashtag to an ID on a g element and using the CSS :target rule. Simple and elegant.
Works in Firefox and Opera at the moment. What about Chromium?
Combine with background images
Combine that with a background image and you can use sprites without setting the horrible position values:
Compare this elegant code
darsain / svg_sprites.md
You need to structure images.svg in a way that enables SVG fragment identifiers. There are 3 ways I know of:
1. SVG stack with global viewBox
You’d use this when all images are the same size.
svg viewBox pl-s">0 0 16 16" xmlns pl-s">http://www.w3.org/2000/svg"> defs> style> .img < display: none > .img:target < display: inline > style> defs> g id pl-s">chart" class pl-s">img"> rect x pl-s">6" width pl-s">4" height pl-s">16"/> rect x pl-s">12" y pl-s">4" width pl-s">4" height pl-s">12"/> rect x pl-s">0" y pl-s">8" width pl-s">4" height pl-s">8"/> g> svg>
2. SVG stack with per image viewBox
You’d use this when every image has different size.
svg xmlns pl-s">http://www.w3.org/2000/svg"> defs> style> .img < display: none > .img:target < display: inline > style> defs> svg viewBox pl-s">0 0 16 16"> g id pl-s">chart" class pl-s">img"> rect x pl-s">6" width pl-s">4" height pl-s">16"/> rect x pl-s">12" y pl-s">4" width pl-s">4" height pl-s">12"/> rect x pl-s">0" y pl-s">8" width pl-s">4" height pl-s">8"/> g> svg> g" tags --> svg>
3. SVG sprite with ID’d views
This one is sub-optimal. When mismatching target element to image size ratio, you might see other sprites peeking from sides. You’d have to make big gaps between images, but that’s ugly and not bulletproof.
It is also more annoying to write build scripts for. But here it is anyway:
svg xmlns pl-s">http://www.w3.org/2000/svg"> view id pl-s">chart" viewBox pl-s">0 0 16 16"/> view id pl-s">plus" viewBox pl-s">16 0 16 16"/> g transform pl-s">translate(0 0)"> rect x pl-s">6" width pl-s">4" height pl-s">16"/> rect x pl-s">12" y pl-s">4" width pl-s">4" height pl-s">12"/> rect x pl-s">0" y pl-s">8" width pl-s">4" height pl-s">8"/> g> g transform pl-s">translate(16 0)"> mask id pl-s">m" x pl-s">0" y pl-s">0" width pl-s">1" height pl-s">1"> circle cx pl-s">8" cy pl-s">8" r pl-s">8" fill pl-s">white"/> line x1 pl-s">8" y1 pl-s">3" x2 pl-s">8" y2 pl-s">13" stroke pl-s">black" stroke-width pl-s">2"/> line x1 pl-s">3" y1 pl-s">8" x2 pl-s">13" y2 pl-s">8" stroke pl-s">black" stroke-width pl-s">2"/> mask> rect width pl-s">16" height pl-s">16" mask pl-s">url(#m)"/> g> svg>
Currently, SVG fragment identifiers in CSS backgrounds work only in FF and IE, and will work in Chrome as soon as crbug.com/128055 is fixed.
Forums
and am having no luck whatsoever. I’ve tried this numerous ways but have yet to figure out the right syntax. Is this even possible? I’ve been searching and searching for an answer but haven’t come up with anything.
Instead of deleting my posts and keeping my thread 4 pages deep where no one will see it, maybe you can actually help me? Can you answer my question please?
As far as I am aware, what you are trying to do is not possible. I don’t believe SVG fragment identifiers can be placed in pseudo-elements like that unless you are using a sprite which isn’t the case here…I think.
Thank you Paulie. I appreciate the reply. We are using a sprite though. The first bit of code above is the sprite which is either called as an include or which is hard coded at he beginning of the HTML doc.
Sprites can be used as background images as a whole, not part. You’d need to use background positioning etc to manage this. What I am saying is use the whole SVG not one small part of it.
@Fatbat From my understanding of the information you have provided – You are using an SVG Sprite – which gets loaded in your HTML doc and must be xlinked. You are then trying to access symbols that you have loaded into your HTML file, from a CSS/less/SASS file. Due to the nature of SVGs and their necessity for xlinking – you will not be able to use an SVG you have loaded into the DOM through your HTML file, to modify the styles of your page or site. For the specific use case that I am imagining you are trying to achieve(an SVG icon used as a background image), consider this: you can load your svg as the background-image property, then use background position to adjust which icon/version of the icon to display. That would look something like this: .icon background-image: url(directory/path-to-svg-sprite.svg);
width: 1em; height: 1em;
font-size: 12px; //makes the width AND height 12px (you would need to adjust your svg viewBox in this particular use case)
display: inline-block;
position: relative;
>
.icon.icon-arrow-left:before background-position: your specific icon coordinates here;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
content: «»;
display: block;//psuedo element best practice is to set a display value
> The tricky thing about this method however, is that you may only access your SVGs as they appear in your sprite – you cannot modify the actual properties of the SVG. So if your icon needs to fade from red to black, you will need a red icon, and a black icon in your sprite sheet.