LiveArt Blog

A Practical Guide to SVG for Web to Print [+ 4 Free Tools]

 

When it comes to creating or just adding graphical assets to the website, you can choose raster formats like popular PNG, JPG, GIF, or vector, like SVG, AI, or EPS. Nevertheless, using SVG format on the web is gaining popularity and becomes a powerful tool in the hands of designers, developers, and even printers. If you want to create logos, icons, animation, or use the image for print, SVG format is as applicable as ever. Let’s get deep into this, and we will explain what SVG is, how to use this, and why this is in demand.

Read more

What is SVG?

SVG, or Scalable Vector Graphic, is a vector-based graphics in XML format which is used for the web and works with JavaScript, CSS, DOM, and other standards. Basically, an SVG image contains lines and curves, which can have any color value. However, some complicated SVG files can have embedded PNG, JPG images, or SVG image itself.

Created with XML, vector images can be scaled to any size without losing resolution and still can look like high-quality images, even in huge sizes. Unlike PNG, the larger the image, the less the quality. Let’s take a look at the example of zoomed SVG and PNG images.

What benefits of using SVG?

- Scalable and adaptive to all screens. All SVG assets are displayed in good quality on different screens like desktop, mobile, tablets, etc. Providing users high-grade images regardless of their devices is one of the main parts of an excellent user experience. 

- You can use a text editor to work with simple SVG graphics, for example, Notepad. This can significantly save your time on installing additional software and figuring out how to work with this. However, for the more complex graphic configuration, you may need to use some tools. We will provide a list of them at the end of the article.

- SVG is supported by all modern browsers like Safari, Chrome, Firefox, etc.

- Compared to raster images, SVG has a smaller file size. It is known that site speed plays a crucial role. Typically, the user leaves the page if it takes longer than 3 seconds to load. Therefore, having SVG assets instead of PNG can improve this indicator.

- SVG can be not only static. Because SVG format works with JavaScript, you can create animation, which can significantly improve your website performance. 

- Regardless of size, SVG images are high-quality, which is well suited for printing.

What does the SVG file consist of?

SVG file consists of text - SVG markup. Every SVG file starts with a <svg> tag, which contains the image’s width and height attributes. After this tag, you can add any shapes you need to create the desired graphic. For example, let’s start with a basic SVG image that contains only one line.

Code sample:

<!DOCTYPE html>
<html>
<body>

<svg height="210" width="500">
  <line x1="30" y1="100" x2="400" y2="20" style="stroke:rgb(115, 3, 252); stroke-width:4" />
</svg>

</body>
</html>

 

Result:

SVG uses a two-dimensional system of coordinates. This system starts from the top left corner (0,0). As you can see, the <line> contains the start point - x1,y1, the endpoint - x2,y2, style attribute defining color in RGB, and the line width. You may have already noticed that this code contains some HTML code. This means that every SVG graphics can be embedded into an HTML page directly.

Shapes

The line is just one of the basic predefined shapes which you can use for graphic creation. You can also draw other shapes like circle, rectangle, ellipse, polyline, and polygon using respective XML tags.

Code sample:

<rect width="300" height="100" style="fill:rgb(255,255,255);stroke-width:1;stroke:rgb(0,0,0)" />

 

Result:

Code sample:

<circle cx="190" cy="120" r="100" stroke="black" stroke-width="1" fill="white" />

 

Result:

Code sample:

<svg height="260" width="500">
  <polygon points="230,20 270,200 130,240" style="fill:white;stroke:black;stroke-width:1" />
</svg>

 

Result:

 

More complex shapes

Having basic shapes allows you to create plain assets. However, what if you want to create a more complicated design with unusual shapes? Here is why the <path> was created for. This attribute allows you to create curves, open and clothed paths and is one of the most adaptable SVG elements. If you want to use <path>, we recommend using professional tools for SVG creation instead of plain text editors. 

The idea of <path> is that all lines or shapes are built sequentially, from one point to another point. The tag <path> has a main attribute d, which consists of commands that can create graphics.

Let’s take a look at the rectangle created using a path.

Code sample:

<svg>
    <path d="M0,0 L300,0 L300,100 L0,100 Z" style="fill:rgb(200,50,170)"/>
</svg>

 

M set coordinates of the first point. In our case, this point starts from the top left corner. L means draw the line from the current point to the specified one. Z is used to complete the path and closes it.

Result:

The same result you will get if you use basic shape <rect>.

Code sample:

<svg>
  <rect width="300" height="100" style="fill:rgb(200,50,170)" />
</svg>

 

The <path> has many other commands that allow you to draw arcs, curves, horizontal or vertical connections with two points.  There are a lot of other path commands which can help you in creating SVG graphics.

 

Can I add text to SVG?

Yes, text can be added to SVG using the <text> tag. As for other elements, you should define coordinates for your text. Text color, size, and font values are also feasible. Please consider that font size should not be bigger than y coordinates because your text will look not entirely. You can also apply a style to your text using CSS properties. For example, font-style, font-weight, text-transform. 

Text in SVG is indexed flawlessly, so it is an excellent opportunity to keep improving your SEO. Regardless this is a standalone file or file embedded in HTML, search engines can recognize the text.

Code sample:

<svg >
  <text x="80" y="60" font-size="40" font-weight="bold" fill="green"> Text here!</text>
</svg>

 

Result:

 

However, adding text through <text> tag can cause some problems with the font-family attribute. For example, when you specify a font-family that is not available on the user’s web browser or is not installed on the desktop, tablet, etc., then this font will not be displayed correctly, or a font similar to it will be used instead. This may be risky, especially for those who sell personalized products for their decoration industries struggling to satisfy customers’ needs. In Liveart, we handle this by using vectorized text. We convert TTF, WOFF, OTF, or PFB files to JS file, where every symbol has its own <path>. This approach allows displaying text correctly without the additional need to install the font. 

Using vectorized text is also a good approach when you need to convert your SVG file to PNG, JPG, or PDF and use it for printing, as text elements will be displayed precisely with the font preserving.

 

Strokes, filters, effect, and shadows

To have your design more sophisticated, you can apply some filters, effects, and strokes. Strokes are used to define the color of a line or text. Besides color, you can set line thickness using the stroke-width property or even create dashed lines with the stroke-dasharray property.

Code sample:

<svg>
    <path stroke="black" stroke-width="6" stroke-dasharray="10,10" d="M10 20 L230 20" />
</svg>

 

Result:

When working with strokes outline, you may face some issues with the stroke-width attribute. By default, width changes are applied to the outside and inside and cause text thickness changes.

Old version of LiveArt HTML5 Designer (v0.10).

Strokes in web to print require preserving the text's initial appearance - size, thickness, etc. In the last version of LiveArt Designer, this issue was solved by changing only the outside part of the stroke while saving the original text size. Having a properly configured stroke is an essential part of output generation and its further usage. Here you can check how strokes should work:

Actual version of LiveArt HTML5 Designer (v1.0).

 

There are also a lot of filter elements that you can apply to your graphics. For example, <feGaussianBlur> for blur effect, <feOffset> for shadow effect, or <feBlend> for blending two images, and many others.

Code sample:

<svg>
<defs>
    <filter id="f0" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
</defs>
   <rect width="200" height="200" stroke="black" stroke-width="5" fill="red" filter="url(#f0)" />
</svg>

 

To identify the unique filter name, we should use the id attribute. You can also control the blur size with the stdDeviation attribute.

Result:

Unfortunately, filters are not supported by all browsers. Google Chrome supports filters only from version 8.0, Safari - from version 6.0, Opera - from version 9.6, Internet Explorer from version 10.0, and Firefox from version 3.0. To provide your users with a good experience, make sure that a default element (without filters) looks good.

When talking about the web to print, it is quite risky to use filters for production output as we are not entirely sure that the customer’s browser will support this. However, LiveArt uses filters to visualize products and create a good impression during customization. We show some parts with thread effect for products like socks to get the product preview as real as possible. One more case where effects can be applied is custom jewelry products or custom tags. For such products, we suggest applying an effect to the text to make it more visible on the reference that will be used for the stamping.

 

You can achieve a stamped effect not only with SVG filters but also using CSS based on text-shadow property, yet the last one has no SVG filter flexibility and features.

More about SVG in LiveArt

LiveArt relies on the SVG format and considers it as one of the most convenient and flexible in usage. Developing robust solutions for more than ten years, we understood that vector format is useful for our customers. Therefore, we have implemented the support of multicolored SVG graphics in our online design software, which you can use from our free artwork gallery or upload your own. SVG format allows you to resize the image to any size without getting a “Low-resolution warning.” Moreover, SVG is easy to output and ready to use without any extra conversions.

 

 

As well as graphics preparation, LiveArt also uses SVG format for product preparations, especially for multicolored uniforms. These graphics need preliminary preparation. If you are interested in preparing vector graphics, you can check our documentation or see our YouTube video.

 

 

Free tools

Inkscape

Inkscape is an open-source tool for creating vector-based graphics. This tool allows rendering primitive shapes, changing colors, applying filters, adding text, working with paths, and object transformation. Developed for working with SVG files, this tool became one of the most popular free tools among designers and developers. 

Snap.svg

Snap.svg is one of the most popular JavaScript libraries that was developed for working with SVG. It is entirely open-source, free, and not inferior in functionality to such libraries as SVG.js, Two.js, and D3.js. This library can work with existing SVG files and as well as with Snap generated. This library has a powerful API that can be useful for developers. Besides static SVG files, you can create animation and provide more engagement to your website.

Method Draw

Method Draw is a straightforward online SVG editor. You do not need to install it on your desktop because this tool is available online, and you even do not need to sign up. The interface is straightforward and easy to use but provides a robust set of tools for graphic creation. You can export graphics as SVG and PNG. 

SVGOMG

SVGOMG is a free UI wrapper over SVGO that was created by Jake Archibald for optimizing and simplifying SVG images. This tool has a lot of features like removing metadata, raster images, viewbox, hidden element, empty text, and even prettify your markup. You can preview all changes by simply clicking on the respective buttons. This software is useful for developers and can help with SVG preparation for further work.


SVG is a compelling format that is gaining popularity every day. There is its own format for each purpose, but as we have already found out, SVG is suitable for creating scalable logos, infographics, animation, illustrations, etc. In this article, we described only basic SVG features; however, this format has a wide range of other exciting features, which we will cover in the next articles. Stay tuned!

In case you need any assistance or have questions regarding SVG, welcome to contact us.

Converting LiveArt HTML5 Online Design Studio Output to Other Formats

LiveArt’s HTML5 Online Design Studio offers a cutting-edge mobile experience on iPhone, Android, and Windows mobile platforms and uses most of the up to date web standards including SVG. To support the industry demand for high-quality output from online product designers, we have implemented SVG as the core technology of LiveArt HTML5.

Read more

While SVG is supported by the majority of the browsers and mobile platforms, it is often necessary to produce lower resolution images as design previews or proofs. The most common scenario is a small thumbnail in a shopping cart that will assure the user he has ordered the exact design. For other production purposes, other different images and formats might be required.

Since most of the backends are Unix or Linux based, our team recommends the following tools to do best for SVG conversion job:

  • ImageMagick - the most popular and very powerful conversion tool. The convert command is widely used for different conversion and can do simple SVG conversions as well.
  • rsvg - a highly-specialized library for SVG processing. Recommended for use if you have complex designs, uploaded images, and custom fonts (see also note on custom fonts below). rsvg is also a common delegate tool for ImageMagick convert as well.
  • Inkscape - a popular free SVG editor. While we recommend using it as an editing tool to convert LiveArt output into different printing formats, it also available for usage as a command-line tool for conversion.

If custom fonts are used inside SVG design, make sure to have them installed into the backend system BEFORE you are running the conversion tool. This would ensure your converted output would keep the original fonts inside the designer.

If you are planning to use SVG in a traditional graphic software like Illustrator or Coreldraw, make sure you also run a short checklist to get your output prepared for that:

  • Copy all externally referenced images locally. Ideally, place them into the same folder as your original design;
  • Install the custom font used on your system;
  • Since SVG is an open and understandable text formatted file, open it with a text editor. Replace all absolute xlink:href references to local files you have prepared in previous steps;
  • While the design would look exactly as you have designed it in the browser, be prepared that professional software may displace certain elements like text. Looks like software grands are still learning to support web standards.

Let us know if the above pieces of advice were helpful to you. Good luck and happy online designing!