Raster PNG files and vector SVG files represent two fundamentally different approaches to creating digital graphics and images. As a web developer, understanding the technical differences between these formats helps inform when and why converting from PNG to SVG can benefit your workflows.
In this comprehensive guide, we’ll cover:
- The core differences between raster PNGs and vector SVGs
- Why SVGs are ideal for use on the web
- Using Inkscape to trace and convert PNG to SVG
- Optimizing and working with the SVG after conversion
- Comparisons to other vector editors like Illustrator
- Additional tools and techniques for PNG to SVG conversion
Follow along for an in-depth look at converting PNGs to optimized SVG web graphics!
Raster PNGs vs Vector SVGs: A Technical Comparison
Before jumping into techniques for converting files, let‘s visually see and compare the PNG raster format versus SVG vectors.
Here is a close up of a 150 x 150 pixel PNG image, where you can see the individual colored pixels that compose the graphic:
Now here is the same image exported as an SVG from Inkscape after tracing:
Instead of pixels, the SVG contains paths, shapes, points, and other vector graphic elements. This underlying technical difference leads to the two formats having very different benefits when used on the web.
PNGs – Simple Raster Graphics
PNG files are made up of a grid of colored pixels, called a bitmap or raster graphic. PNGs have a set pixel width and height when created. Common tools used to design PNG images include photo editors like Photoshop and GIMP as well as illustration software like Illustrator.
As a web developer, the most useful characteristics of PNG files are:
Transparency – PNGs can contain transparency data, allowing portions of the image to be see-through. This is essential for interfaces and logos.
Lossless Compression – PNG uses lossless data compression so no visual quality is lost when file sizes are reduced. This is superior to JPEG for most graphics.
Browser Compatibility – PNG is supported across all modern web browsers. Useful fallbacks for legacy IE browsers include JPEG or GIF formats.
However, PNGs have limitations:
Fixed Resolution – Because raster graphics have a finite number of pixels, PNGs get blurry, jagged, and pixelated when scaled up past their native resolution.
Large File Sizes – Photo PNGs especially can produce rather large file sizes compared to other image types. This causes slow loading times.
Difficult to Edit – To modify shapes and colors in a PNG, you need to manually edit the raster pixel data. It becomes complex and time consuming for dynamic changes.
Now let‘s compare this to how SVGs improve upon many of these issues.
SVGs – Scalable Vector Graphics
Unlike raster pixels, SVG image files use XML-based vector graphics to draw and render shapes, lines, curves, and other graphical elements. This makes SVGs infinitely scalable to any resolution without losing clarity and quality. Some key advantages of SVGs on the web include:
Smooth Scaling – SVGs remain crisp and sharp at any display size, from thumbnails to full-page graphics. This works better than raster images.
Smaller File Sizes – Because SVG data is vector code rather than bitmap pixels, file sizes are smaller and compress better. Simple icons make for ultra small SVGs.
Styling Flexibility – You can dynamically edit colors, sizes, effects, and other style attributes directly in the SVG code. No need to manually edit pixels!
Animation Capabilities – Elements and paths in an SVG can be animated and transformed independently. This is possible via CSS or JavaScript.
Clearly, when it comes to flexible, scalable graphics for the web, SVGs provide major advantages over PNGs and other raster image formats. Converting existing PNG assets into SVGs should be a key step in any web development project.
But how exactly do we perform this conversion from PNG to SVG? Let‘s cover that now!
Using Inkscape to Convert PNG Files into SVGs
Inkscape is professional free and open source vector graphics software for Windows, Mac, and Linux. It includes extremely useful bitmap tracing functionality to convert PNG files into vectors.
Here is a step-by-step guide on using Inkscape to trace and convert a PNG into an optimized SVG:
Step 1: Import the PNG
After installing and opening Inkscape, go to File > Import and select your PNG file:
Step 2: Prepare the Canvas
Depending on your imported PNG, you may need to optimize the canvas for tracing. For example, I resized the document width and height to match the dimensions of my PNG:
Properly sizing the canvas helps prevent unwanted white space in the final SVG.
Step 3: Trace the Bitmap
In the left toolbar, select the Trace Bitmap tool (Shift+Alt+B). This opens the tracing dialog box.
Make sure Single Scan is selected at the top. Then configure your desired trace settings:
Common settings include:
- Tracing mode ( Brightness vs Color)
- Threshold adjustments
- Smoothing and stacking options
- Background removal
- Updating preview to inspect traces
Once settings are tuned, click OK to apply trace to PNG.
Step 4: Edit the Trace
After tracing, you can further edit the vector graphics as needed. For example, remove leftover artifacts, adjust paths and nodes, customize colors, etc.
Step 5: Export the SVG
Finally, delete the original PNG. With only the vector trace left, export the file as an SVG via File > Save As.
And you‘re done – a PNG to SVG conversion in just a few quick steps!
Optimizing SVGs for Web Use
When working with bitmap tracing tools like Inkscape‘s, the raw exported SVG code is not always optimized for the web.
Here are some tips for improving SVG files after conversion:
Clean Up Excess Node Points
Auto-traced shape paths often contain more vector nodes points than necessary. Use Inkscape‘s Node tool to manually delete excess nodes and simplify shapes.
Remove Unused Defs Code
The SVG container holds reused shapes and gradients. Clean out any unused defs code cruft for smaller file sizes.
Combine Similar Shape Paths
If the tracer created numerous shapes that could logically merge, combine them into fewer more complex paths via Path > Combine.
Run SVGO Compression
For final SVG optimization, use a tool like SVGO to further strip whitespace, minify code, compress coordinates, and apply precision reductions. It can shave off considerable file size with no visible quality loss, especially for icon SVGs.
Employing these optimization tips produces clean, compact SVG files ready for web deployment.
How Inkscape Compares to Other Vector Editors
While Inkscape provides an excellent free solution for converting PNGs through its tracing utilities, you may be wondering how it compares to paid alternatives like Adobe Illustrator.
Overall, Inkscape delivers extremely competitive vector tracing tools on par with premium software.
When it comes to PNG conversion specifically, let‘s compare some key capabilities:
| Inkscape | Illustrator | |
|---|---|---|
| Platform Support | Windows, Mac, Linux | Windows, Mac |
| Price | Free and open source | $20/month subscription |
| PNG Import | Via menu & drag/drop | Via menu & drag/drop |
| Auto-Trace Tools | Brightness threshold & color tracing | Image vector trace panel |
| Bulk Tracing | Requires Python extension | Batch process automation |
| Manual Tracing | Bezier Pen and Pencil tools | Similar pen/pencil tools |
| SVG Export | Optimize with CleanUp/SVGO plugins | File > Export menu |
In terms of functionality, both tools allow full import of PNG files, provide automated tracing systems, include manual path tools, and enable high-quality SVG exporting.
The main Inkscape downsides compared to Illustrator are lack of batch tracing queues and less control over the vectorization algorithms.
However, for most everyday design work and web development, Inkscape delivers all the power and capabilities needed for efficiently converting PNG bitmaps into editable scalable SVG graphics.
Additional Tools for PNG to SVG Conversions
While desktop vector editors like Inkscape or Illustrator provide the most control for tracing PNG files, here are a few other options web developers can utilize:
Online Converters
Numerous web apps offer browser-based PNG to SVG conversion:
- SVG Circus – Easy drag and drop interface
- Convertio – Has API and cloud integration
- SVG Convert – Supports batch processing
Quality varies across sites/services depending on conversion algorithms.
Command Line Interfaces
For developers that feel comfortable in terminal environments, CLI graphics tools like ImageMagick‘s convert can convert PNG to SVG.
Similarly, Node.js libraries like png-to-svg offer scriptable JavaScript solutions.
Manual Vector Recreation
When precision is essential, programmers can manually recreate PNG images through code using D3.js, Raphaël.js, or other JavaScript vector graphics libraries rather than relying on automated tracings.
Analyzing PNG vs SVG Compression for Web Use
Deciding which graphic formats to use for your web project can depend heavily on file size – namely, achieving fast page load speeds by minimizing total image weight.
As discussed previously, SVG vector images enjoy significant file size savings compared to raster PNG equivalents, especially for simple icons and logos. But just how drastic is the difference?
Let‘s analyze some real world compression numbers for a sample graphic in both PNG and auto-traced SVG format:
For this 150 x 150 icon-style graphic, the PNG requires over 5X more bytes than the SVG!
Even when compressed further with Zopfli or WebP algorithms, the PNG remains around 3X larger than a compressed SVG optimized via SVGO.
Applying this difference in compressibility to a website with dozens or hundreds of small icons means SVGs can reduce total image weight by 75% or more compared to PNGs.
The vector format savings only grow for more complex graphics with higher color depths as well. This makes a compelling case to convert PNG bitmaps to SVGs whenever retention of quality and expandability is necessary.
Additional Considerations and Concerns
Before deciding to switch all your website‘s PNG assets over to traced SVGs, a few other considerations should be noted:
SVG Compatibility Fallbacks
While SVG enjoys excellent browser support today across 95%+ of traffic, be sure to provide PNG or WebP fallbacks for key graphics loading in older Android stock browsers or legacy versions of IE.
Raster Effects in Vector Containers
Also keep in mind that many photographic SVGs you find online simply embed JPEG/PNG data within the files. While convenient, this eliminates the inherent benefits of actual vector graphics. Always check for embedded rasters before assuming a traced SVG will have ideal compressibility and scaling capabilities!
SVG Animation Complexities
Transitioning animations or interactions from PNG spritesheets to SVGs can pose challenges rebuilding the sequences via SMIL or CSS instead of frame sequences. Plan for additional development and testing efforts adapting existing animation logic.
Learn New Tools
Finally, properly utilizing SVGs on an advanced level requires picking up additional tools in your web dev toolbox – namely, vector editors like Inkscape and optimization utilities like SVGO. Make sure your workflows and teams account for any new tooling training/ramp up.
Migrating from raster PNG files to scaled vector SVGs can optimize web graphics by allowing infinite scaling, easier styling updates, smoother animations, and drastically smaller file sizes.
By tracing PNG bitmaps to vectors in Inkscape, developers can automatically convert images to SVG format with just a few clicks. The integrated tracing utilities match those in paid tools like Adobe Illustrator.
Optimizing and exporting the new SVG assets using cleaning plugins prepares them for integrating into responsive web and mobile experiences.
So consider exploring PNG to SVG conversion capabilities in Inkscape for your next web project or redesign! Combining automated tracing tools with some SVG optimization techniques will take your website graphics to the next level.