When it comes to writing content for your blog, one of the things to consider is to look for images for your website. Unless you’re taking your own photos, sometimes, we need to search for royalty-free imagery to supplement what we write online. Most of the time, it would give us a headache to get images with good quality. As I try to widen my knowledge about graphics and images for my blog, I discovered Scalable Vector Graphics (SVG), and somehow, can be an answer to my challenge as a blogger.
What Is An SVG And The Benefits Of Using Them For Content Creators
SVG is a vector graphic format—based on XML and is used to display a variety of graphics on the Web and other environments. Using SVG can be very simple, but if you start digging in, there is a lot to know about SVG. Since it is a file format like the commonly used JPG/JPEG, PNG, etc., it can be displayed on your website using the <img> HTML tag.
A vector graphic is an image or artwork made up of points, lines, and curves that are centered on machine code or equations, rather than a solid colored square pixel. This means that no matter how large or small or how close you zoom in on the image, the lines, curves, and points remain smooth. This also means that you can scale an SVG image up and down as needed without losing any quality, making it a great choice for your blog, most especially if you activated the responsive design to make it compatible with any device like desktop, mobile, or tablet.
On the other hand, the usual imagery that we use (JPG/JPEG, PNG) is categorized as a raster image. As mentioned above, it is created on a solid colored square pixel. Opposite to an SVG file, when you zoom in on a JPG/JPEG or PNG file, you will get a rough-edged image (in short, it will get pixelated).
Here’s a comparison between a vector image (left) from a raster image (right) in terms of how each image was made up:
Ways to use SVG
There are two main methods that you can implement SVGs on your website:
- As an .svg file. SVG files can be used just like other image files, displaying them on a page using the <img> HTML tag or as a background in CSS.
- Using inline SVG code. Where SVGs differ is that the code inside the file can be copied and pasted directly on a page to display the image. This method allows for more control over manipulating the image.
Here’s an actual sample comparison between embedded images of an svg files from a PNG file (using the first method):
And here’s another comparison between an image using a vector format versus a raster format (using the second method):
Can you guess which one is the vector image and which one is the raster image? (Zoom in on your screen and you will find out. Thank me later.)
Note: For the second method on implementing the SVG image, I use the source code1 below:
You can really see the difference in quality when you zoom in on the images. The SVG retains its sharpness compared to the raster images. SVG is so compelling to use. Perhaps the most compelling reason for bloggers on their online content: they look amazing. Visually very sharp. Vector images are always that way. They are “drawn” from mathematically declared shapes and curves and such, so pixels are no limitation.
SVG For Designers and Hobbyists
As content creators, we also promote our work online through printed collaterals like business cards, flyers, photo books, as well as printing our logos and other artworks on merchandise like t-shirts, tote bags, and more. With that said, utilizing an SVG file can make our printables with high-quality images.
Just imagine the idea that you need to put your logo or trademark on a blown-out tarpaulin and the output of the image of your logo is so pixelated. That’s very disappointing. Not only that you spent long hours designing the materials, let alone you paid someone to do it for you, it will also cost you a lot of money. That’s why we need to take advantage of the flexibility of Scalable Vector Graphics for our prints.
I stumble upon a website called Design Bundles that offers affordable digital products as I go along and search for more details about SVG. When I check their product catalog, I can say that I have found my design inspirations on svg files that are available online from a reliable source. They have beautifully created graphics, templates, patterns, illustrations, and craft files that will give you a clear idea of how SVG would give you benefits. What’s good about it is that they connect with independent designers and provide them an avenue via their Design Marketplace to showcase their works for potential customers looking for discounted prices.
They have thousands of options for all different projects. Their designs can be used for printing on t-shirts, mugs, and other merchandise. If you are into crafting, you can use svg cuts for electronic cutting machines with the likes of Cricut or the Silhouette machine, which I am familiar. Design Bundles provides that SVG images are very flexible and are best used for low-intensity artwork like logos, icons, and simple graphics for both our websites and printed materials.
SVG graphics are a great option for the internet. They are used mostly for creating icons, logos, etc., and they are often more reliable than their raster counterparts, particularly if you take into consideration the retaining of sharpness and quality of your images.
They are also inspiring for our projects like promotional merchandise and artwork portfolio. SVG can be beneficial for designers and crafters as well.
The discussion I mentioned above is by no means exhaustive. You can push the envelope even further if you want to appreciate the flexibility of Scalable Vector Graphics for your website and for your printing needs. For now, at least, we have something to work on experimenting for our future content with high-quality and beautiful imagery for our readers and followers to enjoy.
ALSO READ: 7 Proven Ways On How To Monetize Your Blog
If you like this post, please do share it on social media like Facebook and Twitter. Don’t forget to tag me back.
Subscribe to my YouTube Channel for more exciting but random adventures.
- SVG Circle source code from W3Schools.