SVG files.
The SVG file format is a popular tool for displaying two-dimensional graphics, charts, and illustrations on websites. Plus, as a vector file, it can be scaled up or down without losing any of its resolution. Learn more about the key features of SVG images, their pros and cons, and how the SVG format has evolved.
What is an SVG file?
Scalable Vector Graphics (SVG) is a web-friendly vector file format. As opposed to pixel-based raster files like JPEGs, vector files store images via mathematical formulas based on points and lines on a grid. This means that vector files like SVG can be significantly resized without losing any of their quality, which makes them ideal for logos and complex online graphics.
It’s not just their resizing abilities that make SVGs hugely popular with web designers. SVGs are written in XML code, meaning they store any text information as literal text rather than shapes. This allows search engines like Google to read SVG graphics for their keywords, which can potentially help a website move up in search rankings.
You can easily spot an SVG file by its .svg extension.
History of the SVG file.
The history of the SVG file goes back to the late 1990s when the World Wide Web Consortium (W3C) invited proposals from developers for a new type of vector graphic format. Six competing proposals were submitted and helped inform what eventually became the W3C’s SVG format.
SVGs took some time to grow in popularity. There was relatively little support for them until 2017, when people began to see the benefits of using SVGs in modern web browsers. SVG files are now widely used for 2D website images because most browsers and drawing apps for vector files can easily handle them.
Pros and cons of SVG files.
It’s worth researching SVG advantages and disadvantages before saving your images in this file format.
Advantages of SVG files.
- Unlike raster files, which are made up of pixels, vector graphics like SVGs always maintain their resolution — no matter how large or small you make them. You don’t have to worry about SVG images losing their quality in certain browsers or when you resize them to appear in different places.
- Basic SVG files are often smaller than raster images, which are built from lots of colored pixels rather than using mathematical algorithms.
- Because SVG files treat text as text (and not as design), screen readers can scan any words contained in SVG images. This is very useful for people who need help reading webpages. Search engines can also read and index SVG image text.
Disadvantages of SVG files.
- SVG files are great for web graphics like logos, illustrations, and charts. But their lack of pixels makes displaying high-quality digital photos difficult. JPEG files are generally better for detailed photographs.
- Only modern browsers can support SVG images. You may find it a challenge to use SVG files with Internet Explorer 8 and other older browsers.
- The code contained in SVG images can be hard to understand if you’re new to its file format.
How to open an SVG file.
From Chrome and Edge to Safari and Firefox, all the major browsers allow you to open SVG files these days — whether you’re on a Mac or Windows. Just launch your browser and click on File
Open to choose the file you want to view. It’ll then be displayed in your browser.
Opening an SVG image with a built-in program on your computer is just as easy. Double-click the file name and you’ll get a list of programs that will open it — or it’ll automatically open in a compatible program.
How to create and edit an SVG file.
Follow these steps when using Adobe Photoshop:
- Once you’ve put together an image in Photoshop, click on File > Export > Export As.
- Click on the Format drop-down menu within the box that appears and then select SVG.
- Select Export All and save the file.
A helpful note: since Photoshop is a raster graphics editor, many people prefer to create and edit SVG files in Adobe Illustrator, a vector graphics editor.
SVG files: frequently asked questions.
What is an SVG file?
Scalable Vector Graphics (SVG) is a web-friendly vector file format. As opposed to pixel-based raster files like JPEGs, vector files store images via mathematical formulas based on points and lines on a grid. This means that vector files like SVG can be significantly resized without losing any of their quality, which makes them ideal for logos and complex online graphics.
It’s not just their resizing abilities that make SVGs hugely popular with web designers. SVGs are written in XML code, meaning they store any text information as literal text rather than shapes. This allows search engines like Google to read SVG graphics for their keywords, which can potentially help a website move up in search rankings.
You can easily spot an SVG file by its .svg extension.
What are SVG files used for?
Scalable Vector Graphics have come a long way in recent years — but what are SVGs used for in practice?
Website icons and logos.
Designers often use SVGs to display website icons like buttons, as well as company logos. This file type’s ability to scale up or down without ever compromising its quality means they’re ideal for graphics that need to appear in multiple places and in a range of sizes.
Infographics and illustrations.
Thanks to the use of XML within SVG files, search engines like Google can read text-heavy charts and graphs, which can help with search engine optimization. Because Google can detect keywords within SVGs, it can potentially push a webpage to a higher rank in search results. Plus, to help make web pages just that much more interesting, SVGs also support animation.
Do SVG files support animation?
The SVG file format isn’t just for static images. You’ll discover a range of online tools to help introduce moving elements to your web graphics. SVG animations can include relatively basic elements, such as a slider function to move between different slides in an infographic. Illustrations can also be made to move, like ticking hands on a clock face.
How can I spot an SVG file?
The easiest way to spot an SVG file is by checking the extension code. An SVG file is listed as a .svg file. You can also spot vector images such as SVGs by enlarging them to 200% or higher on your computer screen. A vector image will retain its clean lines and solid colors instead of becoming pixelated or blurry.
Can SVG files only be used on the internet?
Although SVG images are mainly used on the web, they do have a life beyond the online world. For example, because they don’t become distorted when resized from original dimensions, SVG files are useful as templates for printing on clothing, like T-shirts. A JPEG file built from lots of pixels wouldn’t transfer as cleanly.
How large are SVG files?
The size of an SVG file depends on how much image data it contains — but it’s usually lower than most other file types. Complex graphics featuring many paths and anchor points will take up more storage space than simpler, cleaner designs. Try to minimize the number of complex instructions contained within your file.
What’s the difference between SVG and PNG files?
In a nutshell, SVGs are vector files whereas PNGs are raster files. If you stretch a PNG file too far or squeeze it too small, it becomes blurry and pixelated. SVGs don’t contain any pixels, so they’ll never lose resolution. Additionally, PNGs don’t support animation.
Compare SVGs with other file types.
title
SVG files.
cardImageAltText
SVG OG image
cardImage
primaryTag
caas:content-type/article
Tags
caas:content-type/article,caas:products/indesign,caas:products/illustrator,caas:product-categories/photo