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 SVG Support by Benbodhi. 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 Blocks editor also occasionally has problems with the image shrinking to zero size. It’s best if you set a specific pixel size (width or height) in the block properties immediately after inserting. If it does appear to vanish, use the block outline in the editor to find the image and set its dimensions.
The image in this post is an SVG graphic. Right click to open it in its own browser tab, then you can zoom in all you want and the lines will remain perfectly sharp.
If you find this website helpful, subscribe for email updates!
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. It might also work to install a font plugin — like Google Fonts — and select to make sure that font is available on your website.