Base64 SVG Please

[JamesJosephFinn]

Only a Base64 data-uri will render in all IE versions. Inlining SVG in a stylesheet, whether raw or url encoded, will NOT render in IE. Chris Coyier is the CSS guru, but that article of his to which you link has always baffled me. The comments in that thread fill in the parts he left out. I would love to use your plug-in, but it isn't very practical unless you base64 all the things. Thanks so much.

[JamesJosephFinn]

For anyone else who may made need a solution, I'm currently using Grunt Image Embed on a separate svg-sprite.css stylesheet.

[borodean]

@JamesJosephFinn as far as I understood from the original comments thread the issue could probably be fixed by keeping SVG non-encoded, but being more careful escaping some unwanted characters and picking a proper charset. I guess I should experiment with that to see if the feature could be kept.

Could you please share a sample of an image not being rendered in IE?

[JamesJosephFinn]

Yes, sure thing. A recent site we built had this issue testing on IE 11. For example, take a look at the hero bg image on this page: larrysauto.us/services — If you pop open dev tools, and switch out my base64 with either raw svg, or url-encoded, it will not render.

Yes, you are right about the thread. The one poster claimed his svg worked in IE when it was completely url encoded. I couldn't get this to work for any of my svg. In my tests, the only thing works is base64.

Thanks so much!

[borodean]

@JamesJosephFinn fixed in 3.0.2, could you please verify?

I've kept the non-encoded SVG, but adjusted output a bit so Explorer should be fine with it.

[JamesJosephFinn]

Apologies for the delay in responding, but I haven't been in on a PostCSS project until now. The issue was closed, so I thought I'd just pop in when I got things running. Well, I've finally fully converted my workflow over from SCSS. I'm now running PostCSS on a decent sized project, and this plug in would be helpful, but I can't get it to work. I'm having trouble deciphering the options and how to configure them. The documentation isn't very clear, and the error logging isn't much help either. That, coupled with the fact that I'm a js newb. I'll just paste the relevant parts of my tree in here, and maybe you can give me some pointers. Thanks for everything.

├── dev
│   ├── artwork
│   │   └── svg
│   │       └── bg
├── dist
├── generator
│   ├── browserSync.js
│   ├── clean.js
│   ├── copy.js
│   ├── css.js
│   ├── html.js
│   ├── js.js
│   ├── svg.js
│   ├── svgSymbol.js
│   └── watch.js
├── gulpfile.js
├── node_modules
├── package.json
└── src
    ├── artwork
    │   ├── dev
    │   │   └── svg
    │   │       └── bg
    │   │           └── CarbonFiber.svg
    ├── css
    │   ├── base
    │   │   ├── _config.css
    │   │   ├── _reset.css
    │   │   ├── _type.css
    │   │   └── _utilities.css
    │   ├── layout
    │   │   └── _layout.css
    │   ├── modules
    │   │   ├── _card.css
    │   │   ├── _footer.css
    │   │   ├── _form.css
    │   │   └── _header.css
    │   └── styles.css

[JamesJosephFinn]

Never mind, I've found postcss-inline-svg, and piped it to postcss-svgo. This is actually the best workflow for my needs. Thanks anyway, for this tool. I'm sure I'll consider it in the future should the need arise.

[shikelong]

+1.