WordPress Tips

What is an SVG file? Five Things to Know

"SVG" stands for "scalable vector graphics" and is a great solution for two-dimensional images like illustrations that need to look good at any size.

Dan Knauss

What is an SVG file? “SVG” stands for “scalable vector graphics” and is a great solution for two-dimensional images like illustrations that need to look good at any size. But are SVG files a security risk? Why doesn’t WordPress offer native SVG support?

While designing a WordPress website that’s as attractive and user-friendly as possible, you’ll probably encounter some problems with images, especially concerning their resolution, scale, and DPI. Fewer things look more amateurish on a web page than a poorly scaled, distorted photo — or worse, a pixellated logo.

Unfortunately, responsive design requirements only compound our problems with images and scalability. Site users look at your content on various hardware and software platforms. Because of this, you need to ensure your site’s images are flawless on the most commonly used devices, operating systems, and browsers. You need to get image quality right on all of them.

Is SVG an image or document format?

Fortunately, there’s a file format that makes it easy to have flawless vector images of any size: SVG. The SVG format is perfect for all non-photographic images on your WordPress website.

Unlike the standard file formats for images that track every pixel and color, SVG stores image data in a vector format that mathematically describes lines, points, shapes, and curves.

The SVG file format supports perfectly clean and crisp graphics at any scale.

It’s also:

  • Better optimized than PNG and GIF files. The same image will have a smaller file size as an SVG than it will as a PNG or GIF. It’s text in a markup language, not binary code.
  • Programmable and capable of animation. You can animate SVG images dynamically and control them with JavaScript.
  • An easily edited, machine-readable document format. SVG is and is not an image format. Yes, it is for images, but technically speaking, it’s an XML document.

There’s even more to discover about SVG files than you may know, including some potential security risks.

Vector versus Raster 

Vector
Not this Vector.

The images you see on the internet fall into two categories: vector graphics and raster graphics. No doubt you’re already familiar with JPG and PNG image files. These are both raster image file formats.

The raster format refers to image files that store data within a grid called a “bitmap.” The individual squares in a bitmap combine to show us a recognizable image, much like the pixels on your television or computer screen.

Raster graphics are for photographic images. The exact color of every pixel must be uniquely specified to maintain true photographic quality. Raster image formats have a fixed original resolution and number of dots per inch (DPI). If you increase the image size, you will diminish the image’s quality.

PDFs and SVG files are vector graphic formats and work quite differently. They store images as individual points and lines between those points. They use mathematical formulas to determine the shape and placement of the lines and points. When your browser renders an SVG image at any scale, it computes those spatial relationships.

Vector graphics can store color information and text, but they are useless for photos.

How does an SVG file work?

An SVG file is always written in XML, just like a blog feed and many other ways of encoding data. XML is a common markup language for transferring and storing digital information. XML code within SVG files specifies several important things, including:

  • Colors
  • Shapes
  • Text

When a web browser (or any other application) processes an SVG file, it takes in the XML, processes it, and then displays it as a vector image on a user’s screen.

SVG can also be used as inline HTML:

<section class="container">
  <svg viewBox="0 0 102 102">
    <circle cx="51" cy="51" r="50" fill="powderblue" stroke="#333">
  </svg>
</section>

And that SVG block element in your HTML source within a <section> can be styled with CSS like any other HTML element:

.container {
  margin: 2em auto;
  width: 50%;
} 
This code generates a powder blue circle with a thick #333 black border. Try experimenting with it or another simple exercise with circles at CodePen. And here's a 25-step SVG tutorial in the form of an advent calendar. Learn SVG coding this holiday season!

What are the risks involved with using SVG files on a WordPress site?

Because SVG files are XML code, and it's never good to let anyone upload arbitrary code to your website, by default, WordPress will block attempts to upload SVG files. You can get around this easily — many managed WordPress hosts add native SVG support for their customers. You can set it up yourself too.

Veteran WordPress expert Samuel "Otto" Wood explains:

SVG is perfectly safe if you make your SVGs yourself or only use SVGs from sources that you trust, and probably also verify by reading and understanding the content of the document itself.

r/WordPress - Are SVGs really a security concern?

What are the advantages of using SVG files?

SVG files are not only practical but also extremely powerful for use in WordPress web design.

Here’s why:

SVG Files Have Infinite Scalability

An SVG file can be resized to any size — as big or as small as you want — without losing image quality. The visual size of an SVG file doesn’t affect its quality. They will look the same — clean and sharp ‚ no matter how big or small they appear on your website.

And this scalability is important. After all, the size of images will differ for every visitor, depending on the device they use, the size of their browser window, and your site layout.

No matter what, your WordPress site images must appear fully rendered to all your users. And using SVG files for your images makes it much easier to accomplish this.

When you need to expand or shrink the size of an SVG file, the browser that’s rendering it will readjust the lines and points so that solid colors and clear boundaries remain exactly where they should be.

In contrast, raster image files will look pixelated when blown up to larger sizes on a user’s screen. Ultimately, raster images aren’t designed for effective scaling.

There is, however, a cost that comes with SVG's superior scalability. By design, an SVG file lacks the higher quality and detail offered by raster images. However, you can only convey limited visual information within a vector format. In contrast, the raster format will display its pictures with as much detail as the bitmap allows.

If you try to convert a detailed photograph from the JPG format into an SVG, you will get an SVG image that does not look very good and takes up an enormous amount of storage space. That file will be too large and slow to load and process for any purpose, especially on a website.

• Use JPG/JPEGs for your photographs. Other raster formats like WebP, HEIC, and AVIF are emerging as alternatives, but only WebP is widely supported on most operating systems and browsers.

• Use SVG files for geometric, human, or AI-generated images and illustrations, from logos to graphs and charts.

Designers and Front-end Developers Love SVG's Customizability

SVG files allow web developers and front-end designers to have much more control over how graphics appear on websites and web application interfaces they're building. An SVG image can be manipulated in the DOM by JavaScript and CSS. That means SVGs (and their child elements) can have classes, CSS transitions, and respond to user interactions. Developers can modify SVG image colors, text, shapes, visual effects, animations, shadows, and gradients without using a traditional graphic design app.

Compatibility for Scripting

Developed by the World Wide Web Consortium (W3C) as a standard format for Internet graphics, SVG files are designed to communicate well with other web conventions, such as CSS, HTML, and JavaScript. Because of this design compatibility, images saved in the SVG file format can be controlled using these other languages. This opens the door to many possibilities for a dynamic display, including mobile-responsive images, dynamic charts, and animations.

PNG, JPG, and other image formats are not this versatile and cannot be used this way.

Accessibility and SEO

An SVG file is a text file that contains XML markup. This gives you advantages over PNG, JPEG, and other raster image formats.

Programmers can read XML code and understand it immediately. But beyond that, when SVG images contain text rendered as part of the image, that text gets stored as text, not shapes. (In a raster format, the text would be treated as part of the picture encoded in numbers with no additional informational content or metadata to interpret the text.)

Because of this, screen readers can interpret and read SVG files aloud, which helps people with visual disabilities. The text in SVG files is indexed by search engines, too. An infographic with a lot of text saved as an SVG can boost your page rankings and improve its search ranking. SVG is great for search engine optimization (SEO), ALT text, and other metadata.

More Manageable File Sizes

SVGs can store complex images much more efficiently than raster formats, provided the image you’re using isn’t flooded with too much detail.

SVGs contain enough information to display the vectors at any scale, whereas bitmap image files need larger file sizes for images that are scaled up in size.

The small data footprint of SVG files is significant for WordPress website owners because those files will load very quickly on web browsers. Using more SVG files than JPGs and PNGs will help increase your site's overall performance. Remember that you shouldn’t convert your site’s images into SVG files. Highly detailed photographs should remain in a JPG or PNG format.

What should you use SVG files for?

These file types will work best on images with less detail than a standard photograph. Let’s look at the most common online uses for SVG image files.

Icons

Almost all icons will translate well into vector images because they have clearly defined borders and are relatively simple.

Icons for elements such as buttons also need to be size-responsive for various screens, which means they need to be scalable.

Site Logos

SVG is exceptionally well-suited for logos appearing in your site header, emails, and print. Logos usually are pretty simple in design, which makes them perfect for the SVG format.

Illustrations

Non-photo visual art and vectors are a match made in heaven.

These types of drawings on your website will quickly scale while conserving file space when you convert them to SVG.

Interface Elements and Animations

When you harness the capabilities of JavaScript and CSS, you can set your SVG files to change appearance dynamically. They can be automatically changed after a trigger event you choose.

An animated SVG may add much-needed visual flair and improve user engagement with your website or interface.

Data Visualizations and Infographics

Would your WordPress site benefit from illustrated charts or infographics? Maybe you need to create better WordPress feature images to make your site more impactful.

These are more areas where SVGs can shine. Designs will seamlessly scale, and the text within each SVG file is 100% search indexable.

How to create and edit SVG files

To open and view any SVG file, you only need to open it directly in a web browser since every browser supports SVG. You can also preview SVG files in an editing program, which we’ll cover below.

It's possible to modify SVG files in a text editor, but this is impractical for making changes beyond essential attributes like color. Instead, it would help if you used specialized software to do this editing.

There are premium and free options, which include:

  • Adobe Illustrator
  • Canva SVG Editor
  • CorelDRAW
  • Microsoft Visio
  • GIMP (The GNU Image Manipulation Program is free and open source.)
  • Google Drawings (This is part of Google Docs.)

To start creating SVGs, you won’t need to be an expert in XML coding. All you need to do is draw your vectors in any of these programs and export them in the SVG file format.

Every program listed above will have its learning curve and limitations. Try several of the options mentioned above. Get a good feel for the available tools before you settle on any paid or free software for creating vector images.

Screenshot of Canva SVG Editor opened to a Christmas Street Party announcement poster template.
Canva is a great tool for creating and editing SVG illustrations.

Using Adobe Illustrator

Here is one example of how you can use Adobe Illustrator to vectorize an image:

  1. Create a unique design in Adobe Illustrator to convert into an SVG file.
  2. Click on “Image Trace” over your design to select it. Within the drop-down menu, go to Advanced Options. Select “Outline View” for clarity on the borders of the design and to see how many nodes are present.
  3. Click on “Expand” to change the design into a vector.
  4. Resize as needed.
  5. Remove unneeded nodes to fine-tune the design.
  6. In your “Magic Wand” tool, click “Group Selection,” then separate your completed design from any others currently on your artboard.
  7. After selecting your design, click File > Export > Export as SVG (*.SVG). Use that file wherever you wish.
  8. In SVG Options, click “Show Code” to display the XML. Copy and paste the code where you want it to appear within a web page as part of your HTML markup.

Design to scale with SVG files

SVGs come in handy in many different WordPress web design scenarios. Whether you need to enlarge your logo or shrink it to the size of a thumbnail, the SVG format will ensure you don't lose the detail that makes your brand unique.

Get SolidWP tips direct in your inbox

Sign up

This field is for validation purposes and should be left unchanged.
Placeholder text
Placeholder text
Thanks

Oops something went wrong, please try submitting again

Get started with confidence — risk free, guaranteed

Did you like this article? Spread the word: