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, corner radius, etc.

That’s not great for storing a photograph (though you can include a photo in the vector drawing), but for clipart you’ll end up with a smaller (and therefore faster) file that can zoom to any size while remaining sharp, unlike bitmapped graphics which fuzz out if you zoom in too much.

SVGs pose a security risk in that they can contain program code. For this reason, WordPress doesn’t allow their use by default. To upload and use SVG files on your site, install the plugin Safe SVG by Daryll Doyle. This sets the allowed MIME types to include SVG, and includes code to scan your uploads and remove any program code they contain.

Once you have this plugin, you can add SVG files to your media library and use them, or upload them while editing a page, same as you can raster images.

This works best in the “blocks” page editor. If you’re a holdout who prefers the old Classic editor, you can still do it, but last time I tried it, the image was inserted 1 pixel wide and had to be resized.

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.

If you find this website helpful, why not…

Your information will not be shared (except with MailChimp, who manages the subscriber list).

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.

Share...

Leave a Reply

Your email address will not be published. Required fields are marked *