SVG Support for Image Sprites

[Snugug]

I'd be very interested in SVG support for Compass Image Sprites, so PNGs would output a PNG file and SVGs would output an SVG file. There are a few unique things that can be accomplished with SVG Image Sprites that can't be as easily accomplished with PNGs, including infinite scaling using background-size.

[chriseppstein]

I don't know enough about SVG to know how to assemble a unified sprite sheet. But in theory it would just mean snagging the contents of the svg files and munging them together so it seems doable. Also not sure what the implications for the generated css would be. If you can outline this in detail I will consider this for a post 0.12 feature.

[Snugug]

So generating an SVG sprite is actually fairly easy. SVGs are, at their core, XML files, so as you can parse an XML file, you can make an SVG Sprite. Here's the actual XML of an SVG file:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
    <!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
]>
<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
     x="0px" y="0px" width="69px" height="64px" viewBox="0 -0.166 69 64" overflow="visible" enable-background="new 0 -0.166 69 64"
     xml:space="preserve">
<defs>
    <symbol  id="Home" viewBox="-34.731 -31.834 69.462 63.668">
        <path d="M34.73,5.319l-12.597,9.617v15.908h-9v-9.038L0,31.833l-34.73-26.513l5.461-7.155l3.741,2.856v-32.856H25.53V1.021
            l3.74-2.855L34.73,5.319z M20.53-26.834H9v19H-9v-19h-11.529V4.204L0,19.88L20.53,4.204V-26.834z"/>
    </symbol>
</defs>
<use xlink:href="#Home"  width="69.462" height="63.668" x="-34.731" y="-31.834" transform="matrix(1 0 0 -1 34.731 31.8335)" overflow="visible"/>
</svg>

The key things that are going to change when adding one SVG into another is the height/width definition in <svg> and the <symbol> and <use> tags. Let's say we want to add the following SVG into this Home SVG:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="64px" height="64px" viewBox="-2.731 0 69.461 128" enable-background="new -2.731 0 69.461 128" xml:space="preserve"
    >
<symbol  id="Save" viewBox="-32 -32 64 64">
    <path d="M21.239,32H-32v-64h64v53.522L21.239,32z M8.574,25V7.285h-7V25H8.574z M25-25h-50v50h8.858V0.283h31.717V25h2.819
        L25,18.568V-25z"/>
</symbol>
<use xlink:href="#Save"  width="64" height="64" x="-32" y="-32" transform="matrix(1 0 0 -1 32 32)" overflow="visible"/>
</svg>

What we need to do is change the height (and if the width was wider, width) of the <svg> tag, add the <symbol> tag in as-is, and add the Save SVG's <use> tag with the x/y edited to position it correctly. Added bonus, because <use> is the canvas you're drawing the symbol on, you've got the full dimensions of the symbol right there! Anyway, so here's the final SVG image sprite:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="69px" height="128px" viewBox="-2.731 0 69.461 128" enable-background="new -2.731 0 69.461 128" xml:space="preserve"
    >
<symbol  id="Home" viewBox="-34.731 -31.834 69.462 63.668">
    <path d="M34.73,5.319l-12.597,9.617v15.908h-9v-9.038L0,31.833l-34.73-26.513l5.461-7.155l3.741,2.856v-32.856H25.53V1.021
        l3.74-2.855L34.73,5.319z M20.53-26.834H9v19H-9v-19h-11.529V4.204L0,19.88L20.53,4.204V-26.834z"/>
</symbol>
<symbol  id="Save" viewBox="-32 -32 64 64">
    <path d="M21.239,32H-32v-64h64v53.522L21.239,32z M8.574,25V7.285h-7V25H8.574z M25-25h-50v50h8.858V0.283h31.717V25h2.819
        L25,18.568V-25z"/>
</symbol>
<use xlink:href="#Home"  width="69.462" height="63.668" x="-34.731" y="-96" transform="matrix(1 0 0 -1 34.731 31.8335)" overflow="visible"/>
<use xlink:href="#Save"  width="64" height="64" x="-32" y="-32" transform="matrix(1 0 0 -1 32 32)" overflow="visible"/>
</svg>

Then just save as .svg

[chriseppstein]

Pinging @johnbintz as he knows a lot about SVG -- I think the devil's in the details on this.

[Snugug]

Sounds good.
As a bit of backstory, @simurai and I went back and forth on Twitter last night about SVG Image Sprites and some of the pitfalls of using SVG in CSS, namely that if the resulting size of a straight line winds up being 0<x≤1px, the line gets blurry. Not only would SVG Image Sprites be just good to have, but having the compiler be aware of the actual size of the image (like it can currently do w/PNG Image Sprites) could go a long way to alleviating that pain and potentially preventing it all together using some basic math that already exists (like floor/ceiling).

[chriseppstein]

I caught a bit of your conversation on twitter. I think this can be a good addition to compass, but we need to know details about how to avoid these issues, how the generated css would differ, etc. Is there any open source tool that sprites svg files? It'd be great to read their code or even reuse it (if it's ruby)

[Snugug]

There's nothing I can find (admittedly a quick search) that currently does SVG sprites (every web SVG library I know of off the top of my head are all focused on drawing SVGs, not combining/working with existing SVGs).
With that being said, most of the CSS would be the same as it currently works: if you want to have it be the same size as the image, just use it in the background url definition:

background-position: x y;

If you want to resize it, CSS3 background-size will let you resize it. The biggest issue we would have is, for background-size, running that through some checks in the back end of compiling to make sure we don't get partial pixels.

Now that I think of it, Compass support for SVGs would make it easier to do things like style your SVGs based on the variables/mixins currently being used throughout your Sass file as SVGs can be styled with CSS:
http://www.w3.org/TR/SVG/styling.html#StylingWithCSS

Anyway, that last part is kind of pie in the sky, but in my experience w/SVG, an SVG Image Sprite works exactly the same way as a PNG one does, but is better for resolution-independent design.

[chriseppstein]

Ping @mental, can you offer any insights or pitfalls to be aware of?

[Snugug]

Was there anything else done with this? Is there something I can do to help move this along w/my basically non-existent knowledge of Ruby? Or should I learn Ruby and write a patch?

[chriseppstein]

Really just need someone to prototype and test the svg construction. That can be done in any language.

Hunt & pecked on my iPhone... Sorry if it's brief!

On Feb 14, 2012, at 8:15 PM, Snugugreply@reply.github.com wrote:

Was there anything else done with this? Is there something I can do to help move this along w/my basically non-existent knowledge of Ruby? Or should I learn Ruby and write a patch?

---

Reply to this email directly or view it on GitHub:
#685 (comment)

[Snugug]

Sounds good, I'll give it a go later this week.

[xjamundx]

Hey this sounds like exactly what I need right now!

[metaskills]

My comments may be more noise vs signal, but I've been doing some reading on SVG sprites lately. I found these articles interesting.

http://simurai.com/post/20251013889/svg-stacks
http://www.eleqtriq.com/2012/01/enhancing-css-sprites-and-background-image-with-svg/
http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/

[xjamundx]

FWIW, I've been favoring Base64-encoded SVG lately over sprites, because the positioning of sprites I found to be difficult. There are definitely some cons of the base64 approach, but general it's easier and sass has some built-in ways to inline files :)

[metaskills]

@xjamundx I would be interested in knowing how you style your SVG files, if at all. I have found that using inline-image() or Rails asset-data-url means that I can not style the SVG's using an externally stylesheet. I have also found that external stylesheets fail when using object or embed'ed SVG files as assets. There are many hacks that even place your external stylesheet into the SVG document. Here lately I have been using jQuery SVG and some custom CoffeeScript to make things happen for me. That said, much of that topic is a diversion from this thread. But I do think there are a ton of janky ways to dealing with SVG's and as of yet I have not reached a conclusive picture of a best practice when using with sass/compass, CSS in general.

[xjamundx]

Thanks @metaskills I'm by no means an SVG expert and didn't even think about styling them. Super interesting discussion. I feel like SVG is sorely under-utilized and under-documented, but I imagine its hey day is coming soon with the rise of retina displays and the like. Best of luck to you in figuring out the optimal way to use SVG with Sass. It will come together eventually :)