Convert SVG to PNG right in your browser, reliably and correctly
There are many tools to convert SVGs to raster formats: Inkscape, ImageMagick, ezgif.com, convertio.co, online-convert.com, cloudconvert.com, and more. But in my experience, these tools have a lot of problems correctly converting anything but the most basic of SVGs.
If you work with SVGs a lot, you've probably run into this at some point too. You draw an SVG in one program, and then open it in another to discover that all of your text is rotated, or a shape is misaligned, or whole elements of your image are just gone.
Or, if you're an SVG wizard who codes them by hand, you might use the <use> feature, or some elaborate CSS <styles>'s, or some <filter>'s – only to find out that some GUI editor doesn't support those features, and the image is incomprehensible.
Probably because the specification for the SVG format is enormous, and it's incredibly difficult to support all of the features it lays out. Even for popular programs like Inkscape and ImageMagick that have large teams of developers, it's a monumental task to get everything right.
Use a web browser to do the conversion. SVG is first and foremost a web standard. It was designed for the web, and web browsers were the first to implement it. It is meant to work well and be mixed in with other web technologies like HTML and CSS. As such, in my experience, modern web browsers such as Chrome and Firefox are always the most accurate tools at displaying/rendering SVGs, especially for uncommon, new, or otherwise "advanced" features.
This little web tool simply leverages your browser's built-in capability to accurately display/render SVGs. Your browser "renders" the vector graphic to raster pixels so it can display it on the screen, and the tool essentially takes whatever pixels are on the screen and saves it as an image.
This works fine for many cases.
But it becomes a pain if you need a very high resolution image, where you would have to take multiple screenshots and stitch them together.
Taking a screenshot also doesn't allow transparent backgrounds.
This tool alleviates both of these problems with the use of HTML5 <canvas>.
If your SVG has text in it, the fonts it uses may need to be installed on your system for the text to display properly, depending on how the SVG was exported or constructed.
- svgexport, a browser-based SVG renderer as a node.js package
- mybyways converter
- Profesor08's converter