It can be frustrating to find a really great image or graphic and then realize it’s not in a format useable by your favorite editor. Most available images are jpg, png or in some cases the newer webp formats. While Jpgs and pngs are useful for a wide variety digital needs, Png files with transparent backgrounds make them perfect for multiple uses. Printable projects depend on png (and to a certain extent jpg) files. So knowing how to convert a svg to png is essential and actually quite easier than you think. Plus the same process can be used to convert svg to jpg if desired. Let’s take a look at how to convert your svg to png (or even jpg).
Using SVG Files
Free svg files unlike photos or pictures tend to be created in vector format (aka svg). Vector files (Svgs) are scalable; dragging the image edges will increase or decrease the size of the graphic. Vector files retain resolution no matter the size; increasing size of a png or jpg results in a blurry graphic. The beauty of vector files is that resizing small-to-large or vice versa does not result in loss of resolution. But digitally created graphics svg files will need to be converted to png first before uploading it into your favorite editor of choice.
Converting SVG files
Creating unique visual content by combining digitally vector graphics with other images requires converting the svg to png (or jpg) format before use; realistically most online editors don’t recognize svg files. The best way to handle it is to convert the svg into a larger than needed file prior to uploading into the online editor. Both png and jpg files are recognized by most online or downloadable editors; in fact I’ve not run across an editor that can’t crop, resize or edit either one.
Using Inkscape To Convert SVG to PNG | Convert SVG to JPG
Let’s look a free downloadable software graphics editor call Inkscape. This free software is used to create icons, images, anything you can thing of drawing from scratch. Plus, it’s available for Windows, Mac and Linux. Inkscape has a strong user base and lots of online help forums; it makes converting an svg to png or other format quick and painless. So even if you never planned on becoming a graphics designer or creating graphics from scratch, having this free tool available for quick file conversions is worth it. I use Inkscape to convert svg to png on my mac all the time.
The first step is to get Inkscape downloaded and installed. The downloadable software is available via Inkscape’s Download page. Run the executable on Windows or the equivalent dmg file for Mac. On linux, unzip, untar and install the source code or run the install package appropriate for your linux operating system.
After installing Inkscape, open the svg file. On Mac, I simply right click the svg and select “open with” Inkscape. Similarly, the file can be opened on windows and linux. I’m going to demostrate with a svg file of a unicorn on a red colored background.
Need A Starting Point? Take the free course.
Let’s start with a unicorn (for fun)
converting svg to png using inkscape
While I’ll could do all of the editing I needed inside of Inkscape, for purposes of this demo I will convert the file to png only. Once the unicorn is saved as a png file it can be uploaded, edited and used by any online editor I choose.
Let’s convert it in Inkscape
Open the file in Inkscape.
opening svg file in inkscape
Size it roughly (slightly larger) then what is desired. Re-sizing in Inkscape can be done in several ways. First, the “Select and Transform Objects” Arrow in the right vertical menu should be clicked or selected. This allows selecting the graphic by the edges or in this case preferably the corner “handles” (small highlighted squares) than dragging larger or smaller to the size desired. Here’s the trick. Simply selecting and dragging the corner will re-size without restraining the aspect ratio (height to width) of the image. This can distort the image from its original look if that is the desired effect. However, for simple re-sizing, it’s best to keep the aspect ratio exact the same.
NOTE: I recommend creating a png (or jpg) image that is slightly larger than needed. Any online or downloadable editor worth using can resize the file down to the final size while maintaining the resolution. Plus, I prefer a little “fudge factor” in editing and overlaying by starting with slightly oversized images. With a slightly larger image, I can place, edit and size to fit the final graphic dimensions.
transform distorted image into a thumbnail
The other option is to hold down SHIFT+CTRL. This re-sizes the image proportionally keeping the center of the image in a fixed location.
Holding down the CTRL key only while dragging the image smaller or larger will keep the opposite corner of the image fixed while changing the size. These slight variations in re-sizing of an image (or graphic element) are more important when creating a graphic from scratch since the location of each additional element relative to the others is important.
In this demo, all we want to do is resize; there is no issue on whether the center of the image moves during the re-sizing process because the goal is to export the re-sized image as a png file.
Now go to File, Export png. There will be a default export path that you can modify or leave as is. To modify the path click the “Export As”. Notice that the default filename is a bit random; you may want to name it more appropriately before clicking on “Export” to save the file.
Also, notice also that the size and resolution are shown. If you change the size here, the resolution will change as well. If you change the size using the image and SHIFT+CTRL or CTRL key the resolution will remain as is and just the filesize will be modified. For most graphics, sizes below 1980 pixels can easily be managed with most online editors. If you know you need it in a certain size just go back to the image and resize by selecting the arrow and then dragging a corner of the image larger or smaller as needed.
Save the new file
Once the image or graphic is close to the desired size go back to the Export menu, add in a filename and click “Export”. Be sure to give it the png or jpg extension.
If you need transparent pngs, take note. One final item about Inkscape I don’t particularly like is that it doesn’t explicitly let you decide up front whether you want the exported png to be transparent or not. In 99 of out 100 cases, you’ll want background transparency. So to set that up it’s configured via the File, Document Properties menu as shown. The “A” channel is called the alpha channel and that needs to be set to 0.
Now that the image is converted, I can use any method I wish to extract the unicorn, change its color or remove the background from the unicorn. Then I can use the unicorn with my favorite editor and create a new unique version or add it into another graphic I’m making.
The point is not to make cool looking unicorns; it’s about using the technique on an image you need to convert so you can create whatever graphic you need.
Want to know how to make cool graphics using free starting images, icons and illustrations like what I’ve shown here? Check out my course. Whether you’re creating graphics with unicorns or creating graphics for a blog, social media or project, you can make unique images from free resources by editing and combining them. With all the online resources, editors, downloadable software and a bit of know-how, your stunning graphics with be unique, engaging and perfect for your needs.