When I first used an SVG image on my page, my first thought was, SVGs are amazing! I couldn't help the satisfactory feeling it gave me. It makes the webpage very colorful and responsive, with that sleek modern look that's so needed for a good UI/UX. I used it as a background image. Using it was a bit different from other image formats I had come across. This ushered me into reading and learning about SVG images. In this article, I will be sharing my knowledge and findings about SVG images.
What are SVG Images:
SVG means Scalable Vector Graphics. They are images drawn(graphics) with an array of data ordered(vector) such that individual items can be located with a single index or subscripts that is able to change in size(scalable) on different resolutions. Unlike a raster image(which has a fixed-size bitmap), SVGs can easily be made scalable. Thus, the SVG format enables the viewing of an image on a computer display of any size and resolution, whether a tiny LCD screen in a cell phone or a large CRT display in a workstation (without losing quality). This is the wonder of SVG images!
Downloading an SVG image
Using an SVG image entails downloading one if you were not given any or you can't draw one for yourself just like me🤦♀️. You can get SVG images on unDraw, click on the Browse now button and search for images of your choice.
You can also check this blog post for more sites to get them, though some are sold but you are sure to get some free amazing ones.
When you are done downloading an SVG image to use, go ahead and rename it in your file explorer or your code editor and save. The name you have given it is what you work with.
NOTE: Be careful to make sure your image is truly an SVG as some images may be uploaded to the site as SVG but when downloaded, may enter your computer as other image formats.
How to display SVG images on your webpage using HTML and CSS:
When you want to work with an SVG, the first question that comes to mind is: How do I get the SVG to display on my page? There are numerous ways to display an SVG image on your page. The decision of which way to use is mostly dependent on your choice, what you intend to achieve with the image and probably how clean you want your code to be. So, lets see some of them.
Using image html tag:
This is the simplest way to use or display an SVG on your webpage. It is similar to how we would deal with JPG, PNG, and GIF files. You can add a class or an id to it for your CSS.
Limitations: You cannot manipulate the image with JavaScript. If you want to control the SVG content with CSS, you must include inline CSS styles in your SVG code. (External stylesheets invoked from the SVG file take no effect.) You cannot restyle the image with CSS pseudo classes (like :focus).
<img src="bg-curvy-desktop.svg" alt="an svg background image" />
Using CSS background image:
Just as you use other image format for background image, you can equally use an SVG as a background image.
Limitations: Like the image tag method described above, inserting SVGs using CSS background images means that the SVG can't be manipulated with JavaScript, and is also subject to the same CSS limitations.
.element{
background-image: url("bg-curvy-desktop.svg");
}
Using inline SVG:
You can also display an SVG image on your page by using the inline method. This is done by opening the SVG file in a text editor/code editor and copying the XML code used to create the image to the body of your html file. It goes with an svg opening and closing tag. You can add CSS styles to it using the svg tag just like the img tag.
Limitations: This method is only suitable if you're using the SVG in only one place. Duplication makes for resource-intensive maintenance. Extra SVG code increases the size of your HTML file (You get quite a large amount of xml codes that make your file untidy especially for complex images). The browser cannot cache inline SVG as it would cache regular image assets, so pages that include the image will not load faster after the first page containing the image is loaded.
<svg width="1440" height="449" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h1454v449H0z"/></defs><g transform="translate(-14)" fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path d="M14 413.954c90.836-5.359 176.206-50.375 256.111-135.046C389.968 151.9 364.01 105.164 563.005 148.686 762 192.207 745.05 163.699 873 63.13c127.95-100.57 211-77.554 289 44.667 78 122.222 151 162.895 284 207.778 88.667 29.921 92.03 848.285 10.091 2455.09H14V413.956z" fill="#181F2B" mask="url(#b)"/></g></svg>
Using SVG as an object:
You can equally use the object tag to display your SVG image. You can link to an SVG file and retain the ability to affect its parts with CSS by using object tag.
Limitations: You can’t use an external stylesheet on the document, you need to use a style element inside the SVG file itself.
<object type="image/svg+xml" data="bg-curvy-desktop.svg" class="bg-img"></object>
Using iframe tag:
Although, this is not very common and probably not advisable, you can add an SVG image to your webpage with the iframe tag in the body of your html file.
Limitations: iframes can be difficult to maintain and will be bad for your site's Search Engine Optimization (SEO). Using iframe also defeats the purpose of the Scalable in the name Scalable Vector Graphics because SVG images added with this format are not scalable.
<iframe src="bg-curvy-desktop.svg" width="1440" height="449"></iframe>
Conclusion: When you want to use an SVG image on your webpage, the format to use should depend on what you tend to achieve with it. I hope this article has been able to show you the different ways of using it.
Resources:
If you liked this article, please give your reaction, comment and share. You can also reach me on Twitter