Support PNG fallbacks for SVG sprites

[luksak]

I would like to use this tool to generate SVG sprite with a PNG sprite fallback. I have a SASS mixin that does the job for single images:

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

It works very well an offers a very easy fallback method since ever browser that supports two backgrounds, also supports SVG.

Could this be integrated with iconizr? I would finally solve the messy SVG sprite stuff for me.

[jkphl]

Hi Lukas,

thanks for your feedback – I appreciate this a lot!

What I don't quite understand about your suggestion is: Where and why do you want to see this integrated into iconizr? Let me explain my question(s):

First of all, I'm not too sure about your statement that ever browser that supports two backgrounds, also supports SVG. Do you have any surveys covering this? Tests should be done with a wide set of devices, like e.g. the tests that have been made for grunticon. I'd love to see such! If I get you right, this would be a CSS only way to decide which icon type to render (PNG or SVG). At the moment, iconizr does this by using JavaScript, which is a completely different approach (of course, a CSS only approach would be preferable). Also, it would have to be checked if the converse argument is true: Does every browser that supports SVG also support multiple backgrounds?

Next, I don't quite understand if you suggest to simply include the mixin into the iconizr Sass output (without any change) or if it would have to be customized for each icon. Just including the mixin would definitely be out of the scope of iconizr (and could easily be done by providing and importing a custom Sass file containing your mixin). In the other case, I probably don't get the point yet. Could you please be more precise what would have to be done? Thanks!

[luksak]

Hey Joschi

I have this technique form here:

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

As I read the post I saw the following remark:

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.

But besides that I have tested this technique on a wide range of browsers. But I can't provide you with a detailed browser test.

I did only evaluate iconizr if it was suited for my workflow. This was the only thing missing. If I understand the purpose of this tool correctly, I am supposed to use the generated SCSS file and extend the classes such as:

.icon-weather-clear-night {
    @extend %icon;
    background-image: url('weather/weather.svg');
    background-position: 0 0;
}

The code using my proposed technique would be:

.icon-weather-clear-night {
    @extend %icon;
    @inlcude svg-bg('weather/weather');
    background-position: 0 0;
}

.icon-weather-clear {
    @extend %icon;
    @inlcude svg-bg('weather/weather');
    background-position: 0 -48px;
}

This would provide an automatic CSS fallback for all images using SVG and PNG sprites.

Maybe I just don't understand the proper usage of iconizr. Can you explain it to me?

[jkphl]

Hi Lukas,

yeah, I think, giving you a short explanation would totally make sense! ;)

With iconizr, you don't have to care about if your browser supports SVG or not, and you don't have to do the fallback from SVG to PNG. In fact, this is exactly what iconizr does for you.

iconizr renders several CSS files (respectively Sass files, if you like them better), each of them covering another rendering style:

• SVG sprite
• SVG dataURIs
• SVG single icons (just for the sake of completeness, not being used)
• PNG sprite
• PNG dataURIs
• PNG single icons (just for the sake of completeness, not being used)

The only thing you have to do is put a little piece of HTML code (including a loader JavaScript) into the head of your HTML documents. This snippet will detect your browsers capabilities (regarding SVG) and load the appropriate CSS file (preferring SVG over PNG and dataURIs over sprites). It will fallback to the PNG sprite version for browsers that don't understand JavaScript.

You see: There should be no need for the switch between SVG and PNG that you're trying to achieve in your Sass source.

And by the way: Your example above could be simplified a little by extending the abstract %icon base rule instead of all single icon rules:

%icon {
    @inlcude svg-bg('weather/weather');
    background-repeat: no-repeat
}

I hope this was helpful for you?

[luksak]

Well the nicest thing would be to just use one mixin. If I could just do this:

.icon {
  @include iconizr('weather/weather');
}

By doing this the image is added to the global sprite and the background position set accordingly. This is actually what I am looking for. I do not want to deal with the background positioning at all.

[jkphl]

Sorry for the delay, Lukas.

I guess, you still don't quite get the usage of iconizr! With iconizr, you neither have to care about the background positioning, nor the sprite generation itself. Let me try once more:

Imagine you've got an icon called myicon.svg. You upload it to iconizr.com and download the CSS icon kit that is generated (alternatively you could compile the icon kit yourself by using the CLI package from here). The only things you will have to do then are:

• Integrate the little loader script into your HTML documents
• Give the CSS class name myicon to the HTML elements that should display the icon.

That's it. No worries about sprite generation, no worries about positioning. Got it now?

[luksak]

But this is not exactly what I want. I want to be able to use SASS as everyone is used to with images. I just want to use one mixin that does all the magic. I don't want to upload anything or apply a class to my elements. The thing we need is a fully automated solution that integrates with everyone's workflow.

[jkphl]

Ok Lukas, but then iconizr is definitely not what you are looking for. You'd need a Sass plugin to do the magic you want, which iconizr is not. It's a toolchain for icon kit generation, to be used prior to any Sass usage.

As iconizr will never fit your need, I will close this issue now. Please feel free to contact me if you see things different and would still share your thoughts. Good look with your project!