You are using an unsupported browser. Please update your browser to the latest version on or before July 31, 2020.
close
You are viewing the article in preview mode. It is not live at the moment.
Our offices will be closed from Tuesday, December 24th through Wednesday, January 1st. We will reopen on Thursday, January 2nd. During this time, we will continue to monitor and handle critical support items, but responses to most tickets and inquiries will likely be delayed.
Home > Manage Users & Settings > Console > SVG File Best Practices
SVG File Best Practices
print icon

What is an SVG file?

SVG stands for scalable vector graphic, and is used for rendering 2-dimensional images on the internet.  

 

An SVG file is a digital format that is vector-based. This allows for the quality of the graphic to look great at any scale, whether the user is viewing it on a smartphone or large desktop computer. 

 

Vector files store images as a set of points and lines. Mathematical formulas allow these images to maintain their shape as the file is scaled up or down. Vector files also store color and text.

 

 

The other type of image file is rasterized. Raster images store information on a grid of colored squares, or pixels, called a bitmap. Raster images work great for very detailed imagery but have a fixed resolution, which results in reduced image quality as the image size increases. Examples for raster file types are .jpg and .png.

 

How do SVG files work?

SVG files are written in XML. The web browser processes the XML information and displays it on the screen as a vector image. A rasterized image, or a jpg, has a quality that is defined at a particular size. When that size is enlarged, the image loses clarity. 

 

Because the graphics information is stored as XML, an SVG can be interpreted by a screen reader and indexed by search engines, such as Google. 

 

 



How do you create or edit an SVG file?
 

To create or edit an SVG, you will need software for editing vector art. Some of these programs include:

  • Adobe Illustrator
  • Microsoft Visio
  • CorelDRAW
  • GIMP
  • Google Docs
  • Inkscape

 

You don’t need to know anything about programming or XML, you can create and modify your logo using one of these programs and export your image in an SVG format when you are done.

 

You cannot successfully create an SVG file by saving a rasterized image as a SVG. If you only have your logo in .jpg or .png format you will have to recreate it in one of these programs and export it in SVG format. 


If you do not have access to the software above or are not familiar with Adobe products, you can use https://www.pngtosvg.com/ to create colored logo, white logo and mobile icon SVG files. 


To convert your image files via https://www.pngtosvg.com/ follow these steps:

  1. Scroll down to Drag and Drop section within the website.
  2. Select the image file you want to convert, drag and drop the file into the box.
  3. Click generate button on the bottom-right.
  4. Once the file has been generated, select download SVG button to download and save your converted image.

 

 

Feedback
0 out of 0 found this helpful

scroll to top icon