SVG file in a web page

The problem with raster graphics (such as your typical JPG, GIF, or PNG file) is that they don’t scale up very well. They get fuzzy if you zoom in on them.

However, browsers are also able to display images of a different kind. SVG files are vector-based; they don’t store pictures as an array of colored dots, but as a list of line endpoint coordinates, colors and widths. If you have a square in your picture, it remembers the positions of the corners and the color gradient in it.

That’s not great for storing a photograph, but if you have line art, you’re likely to end up with a smaller (and therefore faster) file that can zoom to any size while remaining sharp, unlike vector graphics which fuzz out if you zoom in too much.

Sample SVG imageIt’s not super simple to use SVG images in your web pages, but it can be done. You need to:

  • Install and activate the plugin Enhanced Media Library by wpUXsolutions.
  • In your dashboard, under Settings > Media > Mime Types, define a new MIME type with the file suffix “svg” and MIME type “image/svg+xml”. Check the box that says you allow upload of this file type.
  • You only need to do the above steps once. Thereafter, you can add SVG files to your media library and use them. WordPress doesn’t know how to display thumbnails of these files, but you can see their contents if you click on them in the library grid.
  • When you edit a page or post, you can insert them into the text as you would a normal image. It’s best if you type the text first. The image might appear very small initially — 1×1 pixel seems to be the default. But you can click it to show resizing handles, and drag it to the size you want.

The image in this post is an SVG graphic. Click on it to open it in its own page, then you can zoom in all you want and the lines will remain perfectly sharp.

One caveat: if you use text in your vector image, it won’t necessarily display in the same font on other people’s screens, because they might not have those fonts installed. Try out your image on a different system — your phone, for instance, because it won’t have a lot of different fonts installed. If necessary, you can convert the text in your image to drawn objects to get around this. The file will be larger, but it’ll display the same on all systems.