New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SVG Support for Image Sprites #685

Open
Snugug opened this Issue Jan 25, 2012 · 74 comments

Comments

Projects
None yet
@Snugug
Contributor

Snugug commented Jan 25, 2012

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

This comment has been minimized.

Show comment
Hide comment
@chriseppstein

chriseppstein Jan 25, 2012

Member

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.

Member

chriseppstein commented Jan 25, 2012

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

This comment has been minimized.

Show comment
Hide comment
@Snugug

Snugug Jan 25, 2012

Contributor

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

Contributor

Snugug commented Jan 25, 2012

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

This comment has been minimized.

Show comment
Hide comment
@chriseppstein

chriseppstein Jan 26, 2012

Member

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

Member

chriseppstein commented Jan 26, 2012

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

@Snugug

This comment has been minimized.

Show comment
Hide comment
@Snugug

Snugug Jan 26, 2012

Contributor

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).

Contributor

Snugug commented Jan 26, 2012

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

This comment has been minimized.

Show comment
Hide comment
@chriseppstein

chriseppstein Jan 26, 2012

Member

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)

Member

chriseppstein commented Jan 26, 2012

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

This comment has been minimized.

Show comment
Hide comment
@Snugug

Snugug Jan 26, 2012

Contributor

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.

Contributor

Snugug commented Jan 26, 2012

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

This comment has been minimized.

Show comment
Hide comment
@chriseppstein

chriseppstein Jan 26, 2012

Member

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

Member

chriseppstein commented Jan 26, 2012

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

@Snugug

This comment has been minimized.

Show comment
Hide comment
@Snugug

Snugug Feb 15, 2012

Contributor

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?

Contributor

Snugug commented Feb 15, 2012

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

This comment has been minimized.

Show comment
Hide comment
@chriseppstein

chriseppstein Feb 15, 2012

Member

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)

Member

chriseppstein commented Feb 15, 2012

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

This comment has been minimized.

Show comment
Hide comment
@Snugug

Snugug Feb 15, 2012

Contributor

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

Contributor

Snugug commented Feb 15, 2012

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

@xjamundx

This comment has been minimized.

Show comment
Hide comment
@xjamundx

xjamundx Mar 9, 2012

Hey this sounds like exactly what I need right now!

xjamundx commented Mar 9, 2012

Hey this sounds like exactly what I need right now!

@metaskills

This comment has been minimized.

Show comment
Hide comment
@metaskills

metaskills commented Jul 11, 2012

@xjamundx

This comment has been minimized.

Show comment
Hide comment
@xjamundx

xjamundx Jul 13, 2012

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 :)

xjamundx commented Jul 13, 2012

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

This comment has been minimized.

Show comment
Hide comment
@metaskills

metaskills Jul 13, 2012

@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.

metaskills commented Jul 13, 2012

@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

This comment has been minimized.

Show comment
Hide comment
@xjamundx

xjamundx Jul 14, 2012

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 :)

xjamundx commented Jul 14, 2012

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 :)

@metaskills

This comment has been minimized.

Show comment
Hide comment
@metaskills

metaskills Jul 19, 2012

I have been gathering more information on a this topic and wanted to followup. An emergent technique that I really like has been dubbed SVG Stacks. This basically relies on composing an SVG document with multiple <svg> fragments and linking to that fragment in the IRI/URI. This combined with CSS in the SVG document that hides all fragments and shows only the target fragment using the :target pseudo selector is what makes SVG stacks work.

The only problem I have found is that WebKit and hence Chrome do not support SVG fragment identifiers in CSS background images. To that end, I have filed a Bug 91790 to help resolve this. From the original article, there is already a bug filed on Opera. So assuming this has legs and the bugs resolved, it would be technically possible to compose an SVG document with multiple fragments. See the source of the demo SVG for a structural example.

metaskills commented Jul 19, 2012

I have been gathering more information on a this topic and wanted to followup. An emergent technique that I really like has been dubbed SVG Stacks. This basically relies on composing an SVG document with multiple <svg> fragments and linking to that fragment in the IRI/URI. This combined with CSS in the SVG document that hides all fragments and shows only the target fragment using the :target pseudo selector is what makes SVG stacks work.

The only problem I have found is that WebKit and hence Chrome do not support SVG fragment identifiers in CSS background images. To that end, I have filed a Bug 91790 to help resolve this. From the original article, there is already a bug filed on Opera. So assuming this has legs and the bugs resolved, it would be technically possible to compose an SVG document with multiple fragments. See the source of the demo SVG for a structural example.

@the8472

This comment has been minimized.

Show comment
Hide comment
@the8472

the8472 Aug 1, 2012

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.

Indeed, it would be awesome if you could generate a SVG, with inline styles colored based on color definitions in some SASS files. Then embed them directly via data URIs in a stylesheet.

But that would require a way to preprocess an SVG image, import SASS variables into inline styles and then turn the whole thing into a data URI to be included in another SASS file. That way you could just change a single variable from one color to another and all your icons would get adjusted too.

the8472 commented Aug 1, 2012

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.

Indeed, it would be awesome if you could generate a SVG, with inline styles colored based on color definitions in some SASS files. Then embed them directly via data URIs in a stylesheet.

But that would require a way to preprocess an SVG image, import SASS variables into inline styles and then turn the whole thing into a data URI to be included in another SASS file. That way you could just change a single variable from one color to another and all your icons would get adjusted too.

@metaskills

This comment has been minimized.

Show comment
Hide comment
@metaskills

metaskills Aug 1, 2012

You can style an SVG if it is embedded in your document. I have found using jQuery.SVG as my go to for that. I have not done any testing with a base64 encoded SVG utilizing an external stylesheet.

metaskills commented Aug 1, 2012

You can style an SVG if it is embedded in your document. I have found using jQuery.SVG as my go to for that. I have not done any testing with a base64 encoded SVG utilizing an external stylesheet.

@the8472

This comment has been minimized.

Show comment
Hide comment
@the8472

the8472 Aug 2, 2012

How good is the browser support for linking to an SVG fragment in the main document? svg in data uris works in IE9.

the8472 commented Aug 2, 2012

How good is the browser support for linking to an SVG fragment in the main document? svg in data uris works in IE9.

@Snugug

This comment has been minimized.

Show comment
Hide comment
@Snugug

Snugug Aug 2, 2012

Contributor

SVG Fragments only work in Firefox, so, unfortunately, that's not a viable solution.

Contributor

Snugug commented Aug 2, 2012

SVG Fragments only work in Firefox, so, unfortunately, that's not a viable solution.

@metaskills

This comment has been minimized.

Show comment
Hide comment
@metaskills

metaskills Aug 2, 2012

SVG Fragments only work in Firefox, so, unfortunately, that's not a viable solution.

To be specific for those reading... I "believe" fragments work in all the latest browsers when viewing a raw SVG, embedded in the document, or linked via object/embed. The place I have found that only Firefox supports is identifier fragments when used in CSS backgrounds and the like, hence making the SVG stacks approach moot till that is solved.

metaskills commented Aug 2, 2012

SVG Fragments only work in Firefox, so, unfortunately, that's not a viable solution.

To be specific for those reading... I "believe" fragments work in all the latest browsers when viewing a raw SVG, embedded in the document, or linked via object/embed. The place I have found that only Firefox supports is identifier fragments when used in CSS backgrounds and the like, hence making the SVG stacks approach moot till that is solved.

@the8472

This comment has been minimized.

Show comment
Hide comment
@the8472

the8472 Aug 3, 2012

Ah, what I actually had in mind was the element() function, but that's firefox-only too, it seems. And embedding the SVG images into the main document wouldn't seem all that clean anyway since they won't benefit from caching.

So, for the goal to easily style SVG icons and color them with the same color schema as in your CSS in you can just generate a svg.css to use in your SVG-icons which imports the same color definitions partial as your main stylesheet. Then directly include them via data URIs into the CSS.

gzip compression should mostly take care of the base64 encoding bloat and redundancy created by browser prefixes.

So do we even need SVG sprites?

the8472 commented Aug 3, 2012

Ah, what I actually had in mind was the element() function, but that's firefox-only too, it seems. And embedding the SVG images into the main document wouldn't seem all that clean anyway since they won't benefit from caching.

So, for the goal to easily style SVG icons and color them with the same color schema as in your CSS in you can just generate a svg.css to use in your SVG-icons which imports the same color definitions partial as your main stylesheet. Then directly include them via data URIs into the CSS.

gzip compression should mostly take care of the base64 encoding bloat and redundancy created by browser prefixes.

So do we even need SVG sprites?

@kaij

This comment has been minimized.

Show comment
Hide comment
@kaij

kaij Oct 16, 2012

I have been following this discussion with great interest and have successfully used compass with CSS inline SVG (using inline-image). However, I think this will be a problem when using a lot of / large files: the CSS will get larger. As the rendering engine waits until the CSS has finished loading, you'll get a noticeable delay when viewing the page - especially on slow connections. If the CSS contained the url of a SVG sprite, the CSS would finish loading quickly and the SVG sprite will be loading in the background (while the page is already displayed).

I think this is a strong argument in favor of SVG sprites, at least as long as SVG stacks cannot be broadly used.

kaij commented Oct 16, 2012

I have been following this discussion with great interest and have successfully used compass with CSS inline SVG (using inline-image). However, I think this will be a problem when using a lot of / large files: the CSS will get larger. As the rendering engine waits until the CSS has finished loading, you'll get a noticeable delay when viewing the page - especially on slow connections. If the CSS contained the url of a SVG sprite, the CSS would finish loading quickly and the SVG sprite will be loading in the background (while the page is already displayed).

I think this is a strong argument in favor of SVG sprites, at least as long as SVG stacks cannot be broadly used.

@fschroiff

This comment has been minimized.

Show comment
Hide comment
@fschroiff

fschroiff Jan 3, 2013

SVG support would ideally work like Grunticon does:

Quote from their description page:

  1. All of the icons inline in the CSS as vector SVG data URLs,
  2. All of the icons inline in the CSS as PNG data URLs,
  3. All of the icons referenced externally as PNG images, which are automatically generated from the source SVG and placed in a directory alongside the CSS files.

https://github.com/filamentgroup/grunticon

fschroiff commented Jan 3, 2013

SVG support would ideally work like Grunticon does:

Quote from their description page:

  1. All of the icons inline in the CSS as vector SVG data URLs,
  2. All of the icons inline in the CSS as PNG data URLs,
  3. All of the icons referenced externally as PNG images, which are automatically generated from the source SVG and placed in a directory alongside the CSS files.

https://github.com/filamentgroup/grunticon

@Snugug

This comment has been minimized.

Show comment
Hide comment
@Snugug

Snugug Jan 3, 2013

Contributor

You've missed the most critical part, that those are three separate CSS files. I don't think that's ideal.

For me, what I think a better Compass solution would be the ability to generate PNGs at specific sizes from SVG and even sprite those together, so in your Sass you could do something like this (assuming a Modernizr-like feature detection, user decision):

.home {
  .svg & {
    background-image: inline-image('icons/home.svg');
  }
  .no-svg, .no-js {
    @include svg-png('icons/home.svg', 25px, 25px);
  }
}

Which would output a Data URI for .svg .home and a sprite based on dir icons' that includes a PNG at 25px width, 25px height with all of the normal Sprite accouterment. Two additional parameters forsvg-pngwould include$inline: falseand$sprite: true` to allow for the sprite to be inlined, the sprite to be external, the image to be individually linked, or the image to be individually inlined. This would give users the most amount of flexibility about how the inlined items work w/o generating multiple CSS files unless a user specifies that they want them.

Contributor

Snugug commented Jan 3, 2013

You've missed the most critical part, that those are three separate CSS files. I don't think that's ideal.

For me, what I think a better Compass solution would be the ability to generate PNGs at specific sizes from SVG and even sprite those together, so in your Sass you could do something like this (assuming a Modernizr-like feature detection, user decision):

.home {
  .svg & {
    background-image: inline-image('icons/home.svg');
  }
  .no-svg, .no-js {
    @include svg-png('icons/home.svg', 25px, 25px);
  }
}

Which would output a Data URI for .svg .home and a sprite based on dir icons' that includes a PNG at 25px width, 25px height with all of the normal Sprite accouterment. Two additional parameters forsvg-pngwould include$inline: falseand$sprite: true` to allow for the sprite to be inlined, the sprite to be external, the image to be individually linked, or the image to be individually inlined. This would give users the most amount of flexibility about how the inlined items work w/o generating multiple CSS files unless a user specifies that they want them.

@fschroiff

This comment has been minimized.

Show comment
Hide comment
@fschroiff

fschroiff Jan 3, 2013

I meant "ideal" in the sense that it

  • uses data URIs
  • provides a fallback for non svg capable browsers
  • provides a fallback for non data URI capable browsers

How you structure your CSS should be up to you.

fschroiff commented Jan 3, 2013

I meant "ideal" in the sense that it

  • uses data URIs
  • provides a fallback for non svg capable browsers
  • provides a fallback for non data URI capable browsers

How you structure your CSS should be up to you.

@benfrain

This comment has been minimized.

Show comment
Hide comment
@benfrain

benfrain Feb 8, 2013

I was recently pointed in the direction of https://github.com/astraw/svg_stack - that manages to take a bunch of SVG images and make them into a single SVG image. Purely theoretical but perhaps...

Given a folder full of SVGs, Compass could create a single SVG (using above magic) and then render that single SVG as a PNG image sprite. That image sprite could then be used in the traditional automagic Compass manner as a fallback PNG image sprite complete with positions class names etc.

Extending this riff, a variable could perhaps be passed for @1x and @2x variants of the PNG image sprite (if necessary - although I would presume any device capable of benefiting from a @2x PNG could render an SVG correctly anyway).

Obviously imagining such fun is a whole lot different than actually implementing it and sadly my mind it too tiny to help in any more meaningful way.

benfrain commented Feb 8, 2013

I was recently pointed in the direction of https://github.com/astraw/svg_stack - that manages to take a bunch of SVG images and make them into a single SVG image. Purely theoretical but perhaps...

Given a folder full of SVGs, Compass could create a single SVG (using above magic) and then render that single SVG as a PNG image sprite. That image sprite could then be used in the traditional automagic Compass manner as a fallback PNG image sprite complete with positions class names etc.

Extending this riff, a variable could perhaps be passed for @1x and @2x variants of the PNG image sprite (if necessary - although I would presume any device capable of benefiting from a @2x PNG could render an SVG correctly anyway).

Obviously imagining such fun is a whole lot different than actually implementing it and sadly my mind it too tiny to help in any more meaningful way.

@benfrain

This comment has been minimized.

Show comment
Hide comment
@benfrain

benfrain Feb 14, 2013

Update Nov 2013

I removed this enormous comment as it was asking for data-URI for the output. There's a growing body of evidence to suggest that in some instances this can essentially be an anti-pattern. E.g. http://www.mobify.com/blog/css-sprites-vs-data-uris-which-is-faster-on-mobile/

benfrain commented Feb 14, 2013

Update Nov 2013

I removed this enormous comment as it was asking for data-URI for the output. There's a growing body of evidence to suggest that in some instances this can essentially be an anti-pattern. E.g. http://www.mobify.com/blog/css-sprites-vs-data-uris-which-is-faster-on-mobile/

@scottdavis

This comment has been minimized.

Show comment
Hide comment
@scottdavis

scottdavis Feb 14, 2013

Member

First your going to need a pure-ruby svg library that's active and supports output to png's

Member

scottdavis commented Feb 14, 2013

First your going to need a pure-ruby svg library that's active and supports output to png's

@benfrain

This comment has been minimized.

Show comment
Hide comment
@benfrain

benfrain Feb 14, 2013

Scott, yes, it's certainly a little embarrassing for me to write all that stuff and have nothing to contribute in terms of actual real working code so my apologies. Perhaps until a pure-ruby SVG library makes itself known using Grunticon or a bash script with Inkscape is the only realistic option.

I presume (as I know nothing of Ruby beyond Sass/Compass) a pure-ruby svg library is as rare as rocking-horse poo?

benfrain commented Feb 14, 2013

Scott, yes, it's certainly a little embarrassing for me to write all that stuff and have nothing to contribute in terms of actual real working code so my apologies. Perhaps until a pure-ruby SVG library makes itself known using Grunticon or a bash script with Inkscape is the only realistic option.

I presume (as I know nothing of Ruby beyond Sass/Compass) a pure-ruby svg library is as rare as rocking-horse poo?

@scottdavis

This comment has been minimized.

Show comment
Hide comment
@scottdavis

scottdavis Feb 14, 2013

Member

I'm not sure I have never looked into it but, that would be at the core of this feature.

Member

scottdavis commented Feb 14, 2013

I'm not sure I have never looked into it but, that would be at the core of this feature.

@pietschy

This comment has been minimized.

Show comment
Hide comment
@pietschy

pietschy Mar 5, 2013

Does it need to be pure ruby or is ok to have dependencies as long as it supports *nix and Windows?

A quick google found https://github.com/minimagick/minimagick which has the option of GraphicsMagick (http://www.graphicsmagick.org/). It claims to multiplatform and free from installation conflict issues (although I've never tried).

pietschy commented Mar 5, 2013

Does it need to be pure ruby or is ok to have dependencies as long as it supports *nix and Windows?

A quick google found https://github.com/minimagick/minimagick which has the option of GraphicsMagick (http://www.graphicsmagick.org/). It claims to multiplatform and free from installation conflict issues (although I've never tried).

@scottdavis

This comment has been minimized.

Show comment
Hide comment
@scottdavis

scottdavis Mar 5, 2013

Member

It depends on if they need to compile anything we want compass to run on a fresh install on any os

Sent from my iPhone

On Mar 4, 2013, at 7:11 PM, Andrew Pietsch notifications@github.com wrote:

Does it need to be pure ruby or is ok to have dependencies as long as it supports *nix and Windows?

A quick google found https://github.com/minimagick/minimagick which has the option of GraphicsMagick (http://www.graphicsmagick.org/). It claims to multiplatform and free from installation conflict issues (although I've never tried).


Reply to this email directly or view it on GitHub.

Member

scottdavis commented Mar 5, 2013

It depends on if they need to compile anything we want compass to run on a fresh install on any os

Sent from my iPhone

On Mar 4, 2013, at 7:11 PM, Andrew Pietsch notifications@github.com wrote:

Does it need to be pure ruby or is ok to have dependencies as long as it supports *nix and Windows?

A quick google found https://github.com/minimagick/minimagick which has the option of GraphicsMagick (http://www.graphicsmagick.org/). It claims to multiplatform and free from installation conflict issues (although I've never tried).


Reply to this email directly or view it on GitHub.

@metaskills

This comment has been minimized.

Show comment
Hide comment
@metaskills

metaskills Mar 5, 2013

FYI, news today on SVG Stacks front being shot down. Excerpt from the webkit bugzilla below. I don't suspect this adds much to the conversation in regards to moving toward a solution, but did want to followup.

SVG stacks will not be supported for CSS properties taking CSS Image values.
This includes, but is not limited to, background-image, mask-image, border-image.

This is a resolution of the SVG and CSS WG to differ between resources (like SVG gradients,
masks, clipPath) > and image values during parse time of CSS. This is a security requirement
to protect the users privacy and safety.

See following discussions for further information:
http://lists.w3.org/Archives/Public/www-style/2012Oct/0406.html
http://lists.w3.org/Archives/Public/www-style/2012Oct/0765.html

As an alternative, use SVG image sprites. They work exactly like normal image sprites.

For CSS properties:
Short-term: use background-position to shift your sprites
Long-term: the fragment identifier #xywh=0,0,100,100 will allow to get a sprite out of an image.

For image element:
Short-term: use the fragment identifier #viewbox(0,0,100,100)
Long-term: the fragment identifier #xywh=0,0,100,100 will allow to get a sprite out of an image.

metaskills commented Mar 5, 2013

FYI, news today on SVG Stacks front being shot down. Excerpt from the webkit bugzilla below. I don't suspect this adds much to the conversation in regards to moving toward a solution, but did want to followup.

SVG stacks will not be supported for CSS properties taking CSS Image values.
This includes, but is not limited to, background-image, mask-image, border-image.

This is a resolution of the SVG and CSS WG to differ between resources (like SVG gradients,
masks, clipPath) > and image values during parse time of CSS. This is a security requirement
to protect the users privacy and safety.

See following discussions for further information:
http://lists.w3.org/Archives/Public/www-style/2012Oct/0406.html
http://lists.w3.org/Archives/Public/www-style/2012Oct/0765.html

As an alternative, use SVG image sprites. They work exactly like normal image sprites.

For CSS properties:
Short-term: use background-position to shift your sprites
Long-term: the fragment identifier #xywh=0,0,100,100 will allow to get a sprite out of an image.

For image element:
Short-term: use the fragment identifier #viewbox(0,0,100,100)
Long-term: the fragment identifier #xywh=0,0,100,100 will allow to get a sprite out of an image.

@pietschy

This comment has been minimized.

Show comment
Hide comment
@pietschy

pietschy Mar 5, 2013

I'm not sure if @StanAngeloff would be able to shed any light here. He's the developer of compass-magick and compass-canvas which itself uses the cairo gem. He's also used http://phantomjs.org/ (a headless webkit renderer with a javascript api) and might have some insights. Once again I haven't checked out the installation requirements on all these but figured it'd be worth mentioning them.

pietschy commented Mar 5, 2013

I'm not sure if @StanAngeloff would be able to shed any light here. He's the developer of compass-magick and compass-canvas which itself uses the cairo gem. He's also used http://phantomjs.org/ (a headless webkit renderer with a javascript api) and might have some insights. Once again I haven't checked out the installation requirements on all these but figured it'd be worth mentioning them.

@StanAngeloff

This comment has been minimized.

Show comment
Hide comment
@StanAngeloff

StanAngeloff Mar 6, 2013

Contributor

@pietschy: Cairo is a b*itch to compile on anything not Linux based (this is my experience so far). Getting it to run on Windows/Cygwin is next to impossible.

SVG -> PNG can be accomplished by using Compass callbacks and CSS post-processing. It should be possible to capture all 'image.svg?rasterize' references, extract the width/height from properties, build a script for Phantom to process and inline the resulting PNG from the headless browser.

My 2¢.

Contributor

StanAngeloff commented Mar 6, 2013

@pietschy: Cairo is a b*itch to compile on anything not Linux based (this is my experience so far). Getting it to run on Windows/Cygwin is next to impossible.

SVG -> PNG can be accomplished by using Compass callbacks and CSS post-processing. It should be possible to capture all 'image.svg?rasterize' references, extract the width/height from properties, build a script for Phantom to process and inline the resulting PNG from the headless browser.

My 2¢.

@xjamundx

This comment has been minimized.

Show comment
Hide comment
@xjamundx

xjamundx Mar 21, 2013

I wanted to point out for those worried about in-lining their SVG into CSS making their CSS slow to load that they can just put all of their SVG in a separate CSS file that loads after the main css file. This again would be the same number of downloads as a separate sprite, but the workflow is way simpler by just using inline-data() on individual files instead of having designers building a sprite sheet.

I guess the downside is that it really doesn't work without a pre-processor, but I figure most of us are pretty used to that nowadays anyway ;)

Also to the question about styling SVGs in stylesheets or external files. I really wish that were possible. The closest I can find to that is this approach, which could probably be modified in some way to support the SVGs coming from Data-URIs:
http://www.somerandomdude.com/2012/08/12/svg-css-injection/

I've been following various other threads about SVGs, but it just doesn't seem like anyone is particularly talking about styling external SVGs with CSS. Maybe it's totally not allowed, but it seems like if the SVG is base64 encoded into the CSS, then at least that same CSS file should be able to style it. Anyone know what the deal is there?

xjamundx commented Mar 21, 2013

I wanted to point out for those worried about in-lining their SVG into CSS making their CSS slow to load that they can just put all of their SVG in a separate CSS file that loads after the main css file. This again would be the same number of downloads as a separate sprite, but the workflow is way simpler by just using inline-data() on individual files instead of having designers building a sprite sheet.

I guess the downside is that it really doesn't work without a pre-processor, but I figure most of us are pretty used to that nowadays anyway ;)

Also to the question about styling SVGs in stylesheets or external files. I really wish that were possible. The closest I can find to that is this approach, which could probably be modified in some way to support the SVGs coming from Data-URIs:
http://www.somerandomdude.com/2012/08/12/svg-css-injection/

I've been following various other threads about SVGs, but it just doesn't seem like anyone is particularly talking about styling external SVGs with CSS. Maybe it's totally not allowed, but it seems like if the SVG is base64 encoded into the CSS, then at least that same CSS file should be able to style it. Anyone know what the deal is there?

@scottdavis

This comment has been minimized.

Show comment
Hide comment
@scottdavis

scottdavis Mar 21, 2013

Member

Im going to remove the png check from the sprite importer itself and move it into the engine. As a validate method. that way you can then create a svg engine for sprites if you want as an extension.

Member

scottdavis commented Mar 21, 2013

Im going to remove the png check from the sprite importer itself and move it into the engine. As a validate method. that way you can then create a svg engine for sprites if you want as an extension.

@metaskills

This comment has been minimized.

Show comment
Hide comment
@metaskills

metaskills Mar 21, 2013

I've been following various other threads about SVGs, but it just doesn't seem
like anyone is particularly talking about styling external SVGs with CSS.

I have been doing this, but only using an older Library like jQuery SVG to download and inline the SVG documents. When the SVG document is part of your document, then it can be styled. There may be other cases too, but that solution means the SVG has nothing to do with the topics we have here. Which is sad, because using stacked or sprite'ed SVGs and styling them would be awesome.

metaskills commented Mar 21, 2013

I've been following various other threads about SVGs, but it just doesn't seem
like anyone is particularly talking about styling external SVGs with CSS.

I have been doing this, but only using an older Library like jQuery SVG to download and inline the SVG documents. When the SVG document is part of your document, then it can be styled. There may be other cases too, but that solution means the SVG has nothing to do with the topics we have here. Which is sad, because using stacked or sprite'ed SVGs and styling them would be awesome.

@the8472

This comment has been minimized.

Show comment
Hide comment
@the8472

the8472 Mar 21, 2013

Can't one simply just put a stylesheet link into the data-uri-svg?

css -> embeds data-uri -> references special CSS file just for SVGs -> can import color definitions from a common partial

the8472 commented Mar 21, 2013

Can't one simply just put a stylesheet link into the data-uri-svg?

css -> embeds data-uri -> references special CSS file just for SVGs -> can import color definitions from a common partial

@Snugug

This comment has been minimized.

Show comment
Hide comment
@Snugug

Snugug Mar 21, 2013

Contributor

For in line SVGs, you can link external stylesheets, but linked stylesheets for SVGs used inside stylesheets, support for linked stylesheets is generally non-existent or very sparsely supported with no good way to test for compatibility.

On Mar 21, 2013, at 10:34 AM, the8472 notifications@github.com wrote:

Can't one simply just put a stylesheet link into the data-uri-svg?

css -> embeds data-uri -> references special CSS file just for SVGs -> can import color definitions from a common partial


Reply to this email directly or view it on GitHub.

Contributor

Snugug commented Mar 21, 2013

For in line SVGs, you can link external stylesheets, but linked stylesheets for SVGs used inside stylesheets, support for linked stylesheets is generally non-existent or very sparsely supported with no good way to test for compatibility.

On Mar 21, 2013, at 10:34 AM, the8472 notifications@github.com wrote:

Can't one simply just put a stylesheet link into the data-uri-svg?

css -> embeds data-uri -> references special CSS file just for SVGs -> can import color definitions from a common partial


Reply to this email directly or view it on GitHub.

@jlong

This comment has been minimized.

Show comment
Hide comment
@jlong

jlong Mar 25, 2013

Here's an interesting article about PNG fallbacks for SVG backgrounds without using a "no-svg" class:

http://signaltower.co/2013/02/25/add-png-fallbacks-for-svg-files/

jlong commented Mar 25, 2013

Here's an interesting article about PNG fallbacks for SVG backgrounds without using a "no-svg" class:

http://signaltower.co/2013/02/25/add-png-fallbacks-for-svg-files/

@benfrain

This comment has been minimized.

Show comment
Hide comment
@benfrain

benfrain Mar 26, 2013

@jlong that's certainly interesting. I'd be interested to know if the invisible gradient that's part of the technique effects paint times. Will take a look at this with dev tools and see what difference it makes. If it's trivial (or non existent) then it's probably just wise to double check the correlation between browsers. For example:

A large fly in the ointment is that IE doesn't support gradients (but does support SVG). There's also support for gradients in Android 2.0 - 2.3 (but no SVG support) so that could be an issue too? Don't think that's reliable enough IMHO.

benfrain commented Mar 26, 2013

@jlong that's certainly interesting. I'd be interested to know if the invisible gradient that's part of the technique effects paint times. Will take a look at this with dev tools and see what difference it makes. If it's trivial (or non existent) then it's probably just wise to double check the correlation between browsers. For example:

A large fly in the ointment is that IE doesn't support gradients (but does support SVG). There's also support for gradients in Android 2.0 - 2.3 (but no SVG support) so that could be an issue too? Don't think that's reliable enough IMHO.

@the8472

This comment has been minimized.

Show comment
Hide comment
@the8472

the8472 Mar 26, 2013

If you want to target IE9 too you could use the CSS3 four-value background positioning syntax instead of transparent gradients.

#myelement {
  // fallback for old browsers
  background: <png> 
  // css3 positioning
  background: <svg> top left / auto auto no-repeat padding-box;
}

That would only leave the ancient-android-browser issue.

the8472 commented Mar 26, 2013

If you want to target IE9 too you could use the CSS3 four-value background positioning syntax instead of transparent gradients.

#myelement {
  // fallback for old browsers
  background: <png> 
  // css3 positioning
  background: <svg> top left / auto auto no-repeat padding-box;
}

That would only leave the ancient-android-browser issue.

@benfrain

This comment has been minimized.

Show comment
Hide comment
@benfrain

benfrain Mar 26, 2013

@the8472 that's a good workaround thought. Perhaps there will be some CSS property that could pick out old Android too but I have to be honest and say personally I'd continue using Modernizr until supports is widely implemented.

benfrain commented Mar 26, 2013

@the8472 that's a good workaround thought. Perhaps there will be some CSS property that could pick out old Android too but I have to be honest and say personally I'd continue using Modernizr until supports is widely implemented.

@GeneLocklin GeneLocklin referenced this issue May 4, 2013

Closed

Sass Version #12

@jcc8

This comment has been minimized.

Show comment
Hide comment
@jcc8

jcc8 Aug 5, 2013

Bounty for this here if anyone else motivated to chip in: https://www.catincan.com/bounty/svg-support-image-sprites-issue-685-chriseppstein-compass-github

Crowdfund issue & get merged into main branch to collect.

jcc8 commented Aug 5, 2013

Bounty for this here if anyone else motivated to chip in: https://www.catincan.com/bounty/svg-support-image-sprites-issue-685-chriseppstein-compass-github

Crowdfund issue & get merged into main branch to collect.

@rachelnabors

This comment has been minimized.

Show comment
Hide comment
@rachelnabors

rachelnabors Aug 23, 2013

Contributor

Want. I wanted to use an SVG spritesheet with Compass for an article I'm writing. Unfortunately, I didn't realize that Compass only makes PNG sheets. Now I am full of malaise.

Contributor

rachelnabors commented Aug 23, 2013

Want. I wanted to use an SVG spritesheet with Compass for an article I'm writing. Unfortunately, I didn't realize that Compass only makes PNG sheets. Now I am full of malaise.

@jlong

This comment has been minimized.

Show comment
Hide comment
@jlong

jlong Aug 25, 2013

@rachelnabors Just found Iconizer, which creates SVG sprite sheets: https://github.com/jkphl/iconizr

jlong commented Aug 25, 2013

@rachelnabors Just found Iconizer, which creates SVG sprite sheets: https://github.com/jkphl/iconizr

@benfrain

This comment has been minimized.

Show comment
Hide comment
@benfrain

benfrain Aug 25, 2013

@jlong good find. I'll definitely take a look at that. You tried it yet?

benfrain commented Aug 25, 2013

@jlong good find. I'll definitely take a look at that. You tried it yet?

@jlong

This comment has been minimized.

Show comment
Hide comment
@jlong

jlong Aug 25, 2013

No :)

--John

On Aug 25, 2013, at 3:55 PM, Ben Frain notifications@github.com wrote:

@jlong good find. I'll definitely take a look at that. You tried it yet?


Reply to this email directly or view it on GitHub.

jlong commented Aug 25, 2013

No :)

--John

On Aug 25, 2013, at 3:55 PM, Ben Frain notifications@github.com wrote:

@jlong good find. I'll definitely take a look at that. You tried it yet?


Reply to this email directly or view it on GitHub.

@polikin

This comment has been minimized.

Show comment
Hide comment
@polikin

polikin commented Oct 17, 2013

+1

@waynedpj

This comment has been minimized.

Show comment
Hide comment
@waynedpj

waynedpj commented Nov 24, 2013

+1

@luksak

This comment has been minimized.

Show comment
Hide comment
@luksak

luksak Nov 25, 2013

I have tried iconizr. The problem is that it does not integrate with compass. I had a discussion with the developer:

jkphl/iconizr#8

The problem is that it uses PHP and therefore is not an option for compass I guess. Apart from that: doesn't grunticon support SVG to PNG conversion? At least I am generating all my PNG fallbacks using www.grumpicon.com. Can't we integrate this somehow?

About PNG fallbacks: I have been using this fallback also described in the issue linked above:

@mixin svg-bg($filename, $extension: '.png') {
  background-image: image-url($filename + $extension);
  background-image: none, image-url($filename + '.svg');
}

It is a CSS only fallback stolen from here:

http://germanforblack.com/post/43975575422/protip-all-browsers-that-support-svg-background-images

There is one remark in the post:

Update: Argh. Android 2.x browser will not show either the PNG or SVG image while using technique. Personally, I think a missing background image isn’t going to ruin an experience on a hand held device—so to hell with Android.

luksak commented Nov 25, 2013

I have tried iconizr. The problem is that it does not integrate with compass. I had a discussion with the developer:

jkphl/iconizr#8

The problem is that it uses PHP and therefore is not an option for compass I guess. Apart from that: doesn't grunticon support SVG to PNG conversion? At least I am generating all my PNG fallbacks using www.grumpicon.com. Can't we integrate this somehow?

About PNG fallbacks: I have been using this fallback also described in the issue linked above:

@mixin svg-bg($filename, $extension: '.png') {
  background-image: image-url($filename + $extension);
  background-image: none, image-url($filename + '.svg');
}

It is a CSS only fallback stolen from here:

http://germanforblack.com/post/43975575422/protip-all-browsers-that-support-svg-background-images

There is one remark in the post:

Update: Argh. Android 2.x browser will not show either the PNG or SVG image while using technique. Personally, I think a missing background image isn’t going to ruin an experience on a hand held device—so to hell with Android.

@cimmanon

This comment has been minimized.

Show comment
Hide comment
@cimmanon

cimmanon Nov 25, 2013

The best way to deal with Android 2.x and IE8 is to use background shorthand containing background-size:

.foo {
    background: url(icon.png) no-repeat;
    background: url(icon.svg) 0 0 / auto auto no-repeat;
}

Android 2.x supports background-size, but only with a prefix. IE8 doesn't support background-size at all. Every other browser that supports svg as a background also supports background-size unprefixed.

cimmanon commented Nov 25, 2013

The best way to deal with Android 2.x and IE8 is to use background shorthand containing background-size:

.foo {
    background: url(icon.png) no-repeat;
    background: url(icon.svg) 0 0 / auto auto no-repeat;
}

Android 2.x supports background-size, but only with a prefix. IE8 doesn't support background-size at all. Every other browser that supports svg as a background also supports background-size unprefixed.

@gisu

This comment has been minimized.

Show comment
Hide comment
@gisu

gisu Nov 25, 2013

Better Way is a combination with Modernizr Classes, Browser that can handle SVG loads only the SVG Image, older Browsers only the PNG Image.

.foo {
  .no-svg & {
    background: url(icon.png) no-repeat;
  }
  .svg & {
    background: url(icon.svg) 0 0 / auto auto no-repeat;
  }
}

Or as a Mixin for more comfort.

@mixin background($image) {
  .no-svg {
    background: url(#{$image}.png) no-repeat;
  }
  .svg {
    background: url(#{$image}.svg) 0 0 / auto auto no-repeat;
  }
}

.foo {
  @include background(icon);
}

gisu commented Nov 25, 2013

Better Way is a combination with Modernizr Classes, Browser that can handle SVG loads only the SVG Image, older Browsers only the PNG Image.

.foo {
  .no-svg & {
    background: url(icon.png) no-repeat;
  }
  .svg & {
    background: url(icon.svg) 0 0 / auto auto no-repeat;
  }
}

Or as a Mixin for more comfort.

@mixin background($image) {
  .no-svg {
    background: url(#{$image}.png) no-repeat;
  }
  .svg {
    background: url(#{$image}.svg) 0 0 / auto auto no-repeat;
  }
}

.foo {
  @include background(icon);
}
@cimmanon

This comment has been minimized.

Show comment
Hide comment
@cimmanon

cimmanon Nov 25, 2013

@gisu You're throwing in a Modernizr dependency when it just isn't necessary. Older browsers are already getting the png because they don't understand the line of code that references the svg (which is what they're supposed to do).

cimmanon commented Nov 25, 2013

@gisu You're throwing in a Modernizr dependency when it just isn't necessary. Older browsers are already getting the png because they don't understand the line of code that references the svg (which is what they're supposed to do).

@benfrain

This comment has been minimized.

Show comment
Hide comment
@benfrain

benfrain Nov 25, 2013

Until Compass has something for this, if using Grunt you should try https://github.com/drdk/dr-grunt-svg-sprites it's jolly good.

benfrain commented Nov 25, 2013

Until Compass has something for this, if using Grunt you should try https://github.com/drdk/dr-grunt-svg-sprites it's jolly good.

@gisu

This comment has been minimized.

Show comment
Hide comment
@gisu

gisu Nov 25, 2013

@cimmanon That a old Browser only load the PNG is true, but a modern Browser load the SVG and the Fallback PNG.

gisu commented Nov 25, 2013

@cimmanon That a old Browser only load the PNG is true, but a modern Browser load the SVG and the Fallback PNG.

@luksak

This comment has been minimized.

Show comment
Hide comment
@luksak

luksak Nov 25, 2013

@gisu But we dont need Modernizr for this. The CSS code posted above achieves the same result without loading any external library.

luksak commented Nov 25, 2013

@gisu But we dont need Modernizr for this. The CSS code posted above achieves the same result without loading any external library.

@cimmanon

This comment has been minimized.

Show comment
Hide comment
@cimmanon

cimmanon Nov 26, 2013

@gisu I'm tailing my log file and it says otherwise: only the SVG is requested in modern browsers, never the PNG.

cimmanon commented Nov 26, 2013

@gisu I'm tailing my log file and it says otherwise: only the SVG is requested in modern browsers, never the PNG.

@pasine

This comment has been minimized.

Show comment
Hide comment
@pasine

pasine Jan 17, 2014

I would be interested in this as well. SVG background has widely supported now and it makes working with responsive design much easier.
Here you can find some possible solution to SVG spriting.
Stacking 1 (not supported by WebKit)
Stacking 2 (not supported by WebKit)
Stacking 3 (seems supported by WebKit)
SVG Injector
SVG Injector - Iconic (still not available, but it shows the potentials of SVG Injector)

pasine commented Jan 17, 2014

I would be interested in this as well. SVG background has widely supported now and it makes working with responsive design much easier.
Here you can find some possible solution to SVG spriting.
Stacking 1 (not supported by WebKit)
Stacking 2 (not supported by WebKit)
Stacking 3 (seems supported by WebKit)
SVG Injector
SVG Injector - Iconic (still not available, but it shows the potentials of SVG Injector)

@cimmanon

This comment has been minimized.

Show comment
Hide comment
@cimmanon

cimmanon Jan 17, 2014

Stacking will probably never be an option. It is considered to be a security vulnerability, though I haven't been able to find information as to why.

https://code.google.com/p/chromium/issues/detail?id=128055#c6

SVG stacks will not be supported for CSS properties taking CSS Image values. This includes, but is not limited to, background-image, mask-image, border-image.

This is a resolution of the SVG and CSS WG to differ between resources (like SVG gradients, masks, clipPath) and image values during parse time of CSS. This is a security requirement to protect the users privacy and safety.

cimmanon commented Jan 17, 2014

Stacking will probably never be an option. It is considered to be a security vulnerability, though I haven't been able to find information as to why.

https://code.google.com/p/chromium/issues/detail?id=128055#c6

SVG stacks will not be supported for CSS properties taking CSS Image values. This includes, but is not limited to, background-image, mask-image, border-image.

This is a resolution of the SVG and CSS WG to differ between resources (like SVG gradients, masks, clipPath) and image values during parse time of CSS. This is a security requirement to protect the users privacy and safety.

@rachelnabors

This comment has been minimized.

Show comment
Hide comment
@rachelnabors

rachelnabors Jan 17, 2014

Contributor

While I don't think stacking is the answer, I do think sprites are. I've made several by hand, and I'm using them in production regularly on Compass projects. If Compass could sprite more image formats than just PNG, it would save my buns (I've even had use for JPEG sprites!)

But I think SVG sprites are going to be the most useful to more people. SVG is going to be soooo hot in 2014. It's hot now!

Contributor

rachelnabors commented Jan 17, 2014

While I don't think stacking is the answer, I do think sprites are. I've made several by hand, and I'm using them in production regularly on Compass projects. If Compass could sprite more image formats than just PNG, it would save my buns (I've even had use for JPEG sprites!)

But I think SVG sprites are going to be the most useful to more people. SVG is going to be soooo hot in 2014. It's hot now!

@scottdavis

This comment has been minimized.

Show comment
Hide comment
@scottdavis

scottdavis Jan 18, 2014

Member

@rachelnabors I've been slowly abstracting out a lot of the sprite engine to support other file formats :(. Its in the plan I just need to find time to build them out

Member

scottdavis commented Jan 18, 2014

@rachelnabors I've been slowly abstracting out a lot of the sprite engine to support other file formats :(. Its in the plan I just need to find time to build them out

@rachelnabors

This comment has been minimized.

Show comment
Hide comment
@rachelnabors

rachelnabors Jan 18, 2014

Contributor

Can I send you cookies or something to help with the effort?

I know SVG is a very different from bitmaps. But SVG sprites are the bomb. Compass sprites are sliding away in usefulness for me lately as I use more and more SVG in my assets.

Contributor

rachelnabors commented Jan 18, 2014

Can I send you cookies or something to help with the effort?

I know SVG is a very different from bitmaps. But SVG sprites are the bomb. Compass sprites are sliding away in usefulness for me lately as I use more and more SVG in my assets.

@pasine

This comment has been minimized.

Show comment
Hide comment
@pasine

pasine Jan 19, 2014

I have tested dr-svg-sprites. Not bad, but it doesn't have the magic of css mapping and auto-created classes.
Can I do something to help?

pasine commented Jan 19, 2014

I have tested dr-svg-sprites. Not bad, but it doesn't have the magic of css mapping and auto-created classes.
Can I do something to help?

@rachelnabors

This comment has been minimized.

Show comment
Hide comment
@rachelnabors

rachelnabors Jan 19, 2014

Contributor

For me, I don't need to worry about PNG fallbacks or auto-created classes so much as I'd need the sprite mapping. I don't speak for all SVG sprite users, though :p I am myself an edge case. An industrial strength edge case.

Contributor

rachelnabors commented Jan 19, 2014

For me, I don't need to worry about PNG fallbacks or auto-created classes so much as I'd need the sprite mapping. I don't speak for all SVG sprite users, though :p I am myself an edge case. An industrial strength edge case.

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Feb 16, 2014

@ scottdavis
re:

I've been slowly abstracting out a lot of the sprite engine to support other file formats

Is your WIP code for that available anywhere ?

ghost commented Feb 16, 2014

@ scottdavis
re:

I've been slowly abstracting out a lot of the sprite engine to support other file formats

Is your WIP code for that available anywhere ?

@donut

This comment has been minimized.

Show comment
Hide comment
@donut

donut Aug 11, 2014

I created a solution for Stylus using dr-svg-sprites and a custom template to have generated mixins and variables. It could easily be adapted to SASS/Compass. Just change the template extension to "scss" or "sass" and update the template file accordingly.

donut commented Aug 11, 2014

I created a solution for Stylus using dr-svg-sprites and a custom template to have generated mixins and variables. It could easily be adapted to SASS/Compass. Just change the template extension to "scss" or "sass" and update the template file accordingly.

@rachelnabors

This comment has been minimized.

Show comment
Hide comment
@rachelnabors

rachelnabors Dec 18, 2014

Contributor

POKE POKE POKE

Seriously, with the amount of SVG sprites I'm using and all of the solutions decidedly existing outside the Compass world, I'm starting to consider dropping Compass in favor of a handful of pipeliners.

Contributor

rachelnabors commented Dec 18, 2014

POKE POKE POKE

Seriously, with the amount of SVG sprites I'm using and all of the solutions decidedly existing outside the Compass world, I'm starting to consider dropping Compass in favor of a handful of pipeliners.

@scottdavis

This comment has been minimized.

Show comment
Hide comment
@scottdavis

scottdavis Dec 18, 2014

Member

I don't think that that would end up in core but we could make an extensions that does this. Sadly i dont know enough about svg sprites to implement it.

Member

scottdavis commented Dec 18, 2014

I don't think that that would end up in core but we could make an extensions that does this. Sadly i dont know enough about svg sprites to implement it.

@julmot

This comment has been minimized.

Show comment
Hide comment
@julmot

julmot commented Jul 9, 2015

👍

@Davidiusdadi

This comment has been minimized.

Show comment
Hide comment
@Davidiusdadi

Davidiusdadi commented Jan 25, 2016

👍

@mh-nichts

This comment has been minimized.

Show comment
Hide comment
@mh-nichts

mh-nichts Feb 1, 2016

I would also be really interested !

mh-nichts commented Feb 1, 2016

I would also be really interested !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment