How to Convert SVG to PNG in Linux

1. Introduction

Converting Scalable Vector Files (SVG) to the Portable Network Graphics (PNG) format is a common task when working with vector and raster images in Linux.

In this tutorial, we’ll discuss tools like Inkscape, ImageMagick, and SVG Export to convert SVG to PNG. These tools offer a simple and efficient method for converting both single and multiple files.

For most tools, we use the apt package manager to install them on Ubuntu. Before we dive into the conversion process, let’s first understand the SVG and PNG formats.

2. Understanding SVG and PNG Formats

SVG and PNG are two popular image file formats used in various applications.

SVG is a vector format that uses mathematical equations to draw shapes without losing quality. Therefore, SVG is ideal for graphics that require scaling, such as logos, icons, and infographics.

PNG, on the other hand, uses a grid (or raster) of pixels to create images. This makes PNG suitable for images with many colors and details such as photographs, screenshots, and digital artwork.

3. Using Inkscape

Inkscape is a powerful, open-source vector graphics editor widely used for creating and editing SVG files. Inkscape supports various file formats and offers features like object manipulation, path editing, and text support.

3.1. Installing Inkscape

To use Inkscape, we first install it:

$ sudo apt install inkscape

At this point, Inkscape should be available.

3.2. Converting a Single SVG to PNG

To convert a single SVG to PNG, we can use the –export-filename option with the respective extension:

$ inkscape --export-filename=output.png input.svg
Background RRGGBBAA: ffffff00
Area 0:0:787.909:942.681 exported to 788 x 943 pixels (96 dpi)

Here, we convert input.svg to a PNG file named output.png. Moreover, the output indicates that the background color is fully transparent by default. Additionally, we can see the total dimension and the resolution.

3.3. Converting Multiple SVG Files to PNG

Converting multiple SVG files can be time-consuming. Fortunately, we can use Inkscape to perform batch conversions efficiently through the command line:

$ for file in *.svg; do inkscape --export-filename="${file%.svg}.png" "$file"; done

Now let’s understand the command:

• for file in *.svg; scans all files with the .svg extension in the current working directory via a basic Bash loop and enables us to perform actions with each
• –export-filename=”${file%.svg}.png” changes the .svg extension to .png and saves the output in PNG format
• the loop continues until all SVG files are converted

This command processes each SVG file individually, converting it into PNG format.

3.4. Adjusting Image Properties

In addition to converting files, we can use Inkscape to customize the appearance of the resulting images. For example, we can change the background color to white using:

$ inkscape --export-background=white --export-filename=output.png image1.svg

Another important aspect is the resolution that we can modify by adjusting the dots per inch (dpi) value:

$ inkscape --export-dpi=300 --export-filename=output.png image1.svg

Similarly, we can resize the image by specifying a width:

$ inkscape --export-width=800 --export-filename=resize_output.png image1.svg

This command exports the image with a width of 800 pixels, and the height is automatically adjusted to maintain the aspect ratio.

4. Using ImageMagick

ImageMagick is another popular tool that we can use to transform image files in various formats including SVG.

4.1. Installing ImageMagick

Again, ImageMagick needs to be installed first:

$ sudo apt install imagemagick

Once installed, we can use ImageMagick for file conversion.

4.2. Converting a Single SVG to PNG

Converting a single SVG to PNG using ImageMagick is straightforward:

$ convert input.svg output.png

The resulting PNG image retains the original dimensions and resolution of the SVG file, with a default white background. Again, the extension decides the format.

4.3. Converting Multiple SVG Files to PNG

To convert multiple SVG files to PNG in bulk, we can utilize the mogrify command:

$ mogrify -format png *.svg

This command processes all files with the SVG extension, converting them to PNG format while preserving their original filenames.

4.4. Adjusting Image Properties

ImageMagick provides various options to fine-tune the output image.

For instance, we can modify the background to be transparent:

$ convert -background transparent input.svg output.png

We can also adjust the resolution by specifying the density:

$ convert -density 300 input.svg output.png

Additionally, we can scale the image by specifying a width and height to resize:

$ convert -resize 800x600 input.svg output.png

Alternatively, we can specify only the width, enabling the height to adjust automatically.

5. Using SVG Export

The SVG Export is a command-line tool specifically designed to export SVG files to various formats.

5.1. Installing SVG Export

The Node Package Manager (NPM) is necessary to be installed first before installing SVG Export:

$ sudo apt install npm && sudo npm install -g svgexport

Thus, we should now have both NPM and svgexport.

5.2. Converting a Single SVG to PNG

For single-file conversion, we can use the direct syntax:

$ svgexport input.svg output.png

The resulting image maintains its original dimension and has no compression, preserving its quality. Further, the background color is transparent similar to Inkscape.

5.3. Converting Multiple SVG Files to PNG

For batch conversion, we can again use a shell loop:

$ for file in *.svg; do svgexport "$file" "${file%.svg}.png"; done

Again, a similar approach is used to process multiple SVG files but with the svgexport tool.

5.4. Adjusting Image Properties

To customize the image, we can use different options.

For example, let’s change the background:

$ svgexport input.svg output.png --background "white"

To modify the resolution, we use –dpi:

$ svgexport input.svg output.png --dpi 300

In addition, we can alter the image width:

$ svgexport input.svg output.png --width 800

Similar to the earlier example, the output image has a width of 800 pixels while keeping its proportions intact.

6. Conclusion

In this article, we’ve explored three effective tools – Inkscape, ImageMagick, and SVG Export, for converting SVG files to PNG using the terminal.

Inkscape is ideal for vector graphics editing and conversion, while ImageMagick provides various image manipulation options. SVG Export is a lightweight tool for exporting SVG to other formats.

Depending on the specific requirements, we can choose the best tool based on its strengths and use cases.