How to Convert SVG Sprite into PNG Images

How to Convert SVG Sprite into PNG Images

If you want to use SVG sprites for your icons, you can find several great generators which can create a robust icon system for you. Unfortunately, some of these services don’t generate icons in PNG format and SVG is not supported in IE8 and some older browsers on iOS and Android. If you often change icons or their colors, it is annoying to always use a graphic editor to update PNG images.

Gulp is a streaming build system which uses Node.js and I decided to use it to automate this task. Luke Whitehouse wrote about workflow, in which separate SVG files are converted into PNG files and SVG sprite. In our workflow, we convert SVG sprite into separate files and then convert them into PNG format. Sample project is viewable on GitHub.

At the beginning we define external config file which contains options of PNG images and relative path to SVG sprite.

At first part of our gulp task we convert SVG sprite into separate files.

At the end we use gulp-svg2png to convert separate SVG files into PNG files and gulp-gm to resize our PNG files. Gm is an interface of GraphicsMagick and ImageMagick tools for image manipulation in Node.js. We have to install one of these tools (using Homebrew or Chocolatey).

Gm provides many functions for imagine manipulation which we can use in our gulp task. If we want to generate PNG sprite, gulp-svgfallback generates PNG sprite from SVG icons. Moreover, we can include image compression or generates images into different sizes.


  • marinir seo

    good post

  • Tomáš Stankovič

    Nice solution Andrej.

  • netyou

    Thanks a lot for this!
    I had a great big mess with a sprite that was not being maintained. I used only the svg generating code to have a look at the content of the sprite and cleared out some junk from the sprite.

    You helped me a lot.

    One thing to point out is that you’re missing the colorName variable on line 28 of the second code snippet.

    1. Andrej Gajdos

      Thanks @netyou:disqus, I am glad this post help someone 🙂 If you want to check complete code, you can take a look here

Leave a Reply

Your email address will not be published. Required fields are marked *


Holler Box

Welcome! Do you mind if I ask you a few questions?

Sure!Not right now, maybe later?

How do you describe what you do for a living? (1/3)

I'm an owner/founderI'm a leader/managerI'm a developerI'm a recruiterI'm a designerI'm a bloggerI'm an artistOther

Which of these best describes you? (2/3)

I own my own businessI am employed full-timeI am independent contractor, freelancer, or self-employedOther

What's your BIGGEST challenge right now? (3/3)

I am looking for an adviceI need to grow my teamI am looking for someone technical who helps me turn an idea into an applicationI am looking for a developer who helps me build/update a website/web applicationI am looking for someone with a specific technical expertise or knowledge who helps me with a certain taskOther

Please tell me more

Finding a better jobFinding a better project/clientUnrealistic client's expectations or requirementsI don't have time to learn new technologiesI am not able to solve an issue/technical challengeOther

Please tell me more

Finding a developer for my clientAttracting the right candidatesOther

Please tell me more

What brings you to this website? (3/3)

Google or different search engineI want to learn web developmentOther

Please tell me more

Please tell me more




Phone Number

Holler Box
%d bloggers like this: