Output and Printing

On This Page

Introduction

Well done! You've made it through the gauntlet of SVG coding and hopefully have a good grasp of how to arrange your shapes, curve your paths, setup your files, and make brilliant graphics. The final and core point of all of this is to produce actual tactile graphics, so let's look at the variety of ways to turn your drawing from code into a tangible embossed or printed piece of paper!

Embossing

Embossing was the primary way I was first introduced to how SVG graphics could be turned into touchable tangible graphics. Embossers have specialized printing mechanisms that can print braille, trace lines, create textures and patterns, and even have differentiation in dot height depending on the brand and model.

If you are familiar with embossers or have one already, it's quite simple to print out your graphics from a browser.

Printing from a Browser

  1. Open your completed SVG file in Google Chrome or Mozilla Firefox on either MacOS or Windows. Safari can open SVGs, but in my experience the support hasn't worked out all that great when displaying and printing the graphics. Hoping to change this someday when SVG files are supported more in Safari.
  2. Open the Print dialog for the browser and ensure your embosser is plugged in, online, and seen as the chosen printer.
  3. Set the print scale to 100%, provided that you are have an 800x1000 canvas and are printing to Letter paper. Adjust the scale if your overall canvas is smaller or if you are going for a specific size.
  4. Follow your embosser recommendations for margins and set them accordingly. I generally have left my margins set to 0 for my Delta 2 embosser.
  5. Have paper ready in your embosser, pop in some earplugs, hit Print, and your SVG will be on its way to becoming tactile!

Converting SVG to Raster images

Scalable Vector Graphics are Vector files, hence the name. The imagery we are generating is created entirely with code and numerical values, which is why we can scale these to be as small or as large as we want. They do not contain pixels until we "rasterize" them, or convert them from pure vector mathematical numbers into actual blocks of color/pixels to make up an actual image file.

There are a variety of tools out there to help with this, including grabbing a screenshot of the drawing when it is loaded into a browser, but perhaps we want more robust and accurate ways of outputting our drawings as raster graphics when we need them as visual files.

Why would we do this? Well, we can't share our drawings on social media since SVG generally isn't an accepted photo format for Facebook, Twitter, Mastodon, etc. Sharing out pictures of your work is easier and more accepted when copies are converted into raster images like .png, .jpeg, and other picture formats.

You may need to provide a raster image for print shops and services, or you may want to create a portfolio document with multiple pages of your artwork.

You may also have older embossers that only accept specific kinds of image files and can't read direct SVG code or print out SVG images out of browsers. Here's a way to convert straight from SVG to PNG, PDF, Jpeg, or any other format with just some code in a Terminal or command line interface.

rsvg-convert

For our purposes, rsvg-convert works really well in outputting raster image files from SVG files in the command line. This does take a bit of command line interface understanding and comfortability to set up, but it's definitely much more accessible than trying to drag a cursor around a screen to grab just the right screenshot.

rsvg-convert documentation and guide

After getting Python installed along with Homebrew or a package manager, and when you are ready to export out your SVG drawing as a PNG file, follow these steps:

  1. Install the librsvg package with either "pip install librsvg" or "brew install librsvg" and let that process complete.
  2. In your Terminal, cd into the directory where you have your SVG files that you'd like to convert.
  3. Type the following command: 
    $ rsvg-convert -h 1000 myDrawing.svg > myDrawing.png
  4. The new raster PNG image will appear in the same directory as your SVG file. That's it!

This command uses the "-h" flag to set the height of the output file and width will be automatically calculated. We are assuming that your drawing canvas is 1000 units high, but set that to whatever your actual canvas height number is.

Right after we set the height, we type in the source SVG filename (use the Tab key to autocomplete the filename and extension), and then note the > symbol pointing to the output filename. You must include a filename and an extension, in this case ".png."

Other interesting flags to add to the rsvg-convert command include the following, and take note of the double hyphens you need to include for each flag:

--page-width and --page-height
Sets the ultimate page width and height of your output size. Set these to 8.5in and 11in respectively for a sheet of Letter paper.
--width and --height, or -w and -h
Sets that actual width and height of your output file, and if you want to keep a 1 to 1 ratio between your SVG and the raster image, you'll want these to match your SVG canvas settings.
--keep-aspect-ratio
If you are scaling your output image, you'll want this flag to be present so your raster image doesn't end up distorted or stretched.
--dpi-x and --dpi-y
Sets the resolution for the output file, defaulting to 96dpi. You may want to set these to 100 as we are generally assuming that our files are being output at 100 dots per inch.
--format=pdf, jpeg, etc.
Use the format flag to specify the format of the output file. Make sure that the output filename at the end of the command matches the format you put here.
--top and --left
Sets the top and left margins of how the drawing appears in the raster image/print. Just like our SVG origin, the output origin is also the top left corner of the image. Units can be in inches, millimeters, centimeters, points, pixels, and more.
file1.svg file2.svg file3.svg > portfolio.pdf
Use this format to create multiple pages with a filetype that accepts them, such as a PDF. This example will create a three page PDF document named "portfolio."

If you follow the documentation for rsvg-convert, you'll find many more flags and features that you can add into the command to take full control of your output.

File Setup for Adobe Illustrator Import

While this entire tutorial site is built around creating your own SVG graphics for tactile output, there may exist some cases where you will want to add the XML code back into a file for overall compatibility. While the stripped-down SVG tags we started with in the Setup page will open in Adobe Illustrator and other apps, I thought I'd show exactly what has been stripped out of the file just in case you encounter any situations where your SVG drawings cannot be opened by anything other than a browser.

If you run into this particular situation, try adding the following code to the top of your file and replace the entire opening SVG tag. This new SVG tag contains the viewBox attribute, so be sure to adjust both that and the width and height attributes to the canvas size you are working with.

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 800 1000" width="800" height="1000" xml:space="preserve">

This code starts off with the XML designation tag which comes straight out of Adobe when exporting Illustrator files out as SVG. The SVG tag also contains a variety of attributes that Adobe seeks to understand the file as an SVG when re-importing a graphic.

Print Methods Coming Soon