A Rookies Guide To SVG in an HTML/CSS World: Part 1
Welcome to SVG
In a pixelated world, where the vast majority of the audience viewing our webpage has 20/20 vision, it is important for the content on our web page to appear crisp and clean across all screen sizes. If you’re on this page, chances are you’ve been attempting to scale a .jpg or .png which has resulted in a blob of blurry pixels. Don’t worry, we’ve all been here.
Which is why I shall waste no more time and introduce you to the SVG. For those among us who are hearing about this for the first time, it stands for Scaleable-Vector_Graphics. SVG’s are a beautiful thing because they go hand in hand with the on-going standard of responsive design, as the vector graphic may be scaled with no loss of resolution (Basically a one size fits all ). Unlike .jpg and .png which are composed of pixels, SVG’s are composed of vectors.
Part 1 of this blog will guide you through the process of implementing these vital tools on to your site!
Part 2 will demonstrate the ability of manipulation in your text editor using CSS/JS and how to divide and clean up your XML markup.
How They Work
Behind the scenes, SVG’s are an XML based markup which contain 2-dimensional vectors and can be made with any vector based software such as illustrator or sketch. The beauty of an SVG is that it has a lot in common with our HTML/CSS files, which unlike .jpg or .png, will grant us the ability to manipulate our image simply using code. SVG’s will also play a fun role in CSS/JS animations, as well as being accompanied by a pseudo class(such as hover), as their properties may be altered depending on the users actions.
Getting Them On Our Site
How to make a vector graphic is totally up to you. My method of choice is Adobe Illustrator but there are many other great softwares out there such as Sketch and Inkscape. After the creation of your vector image, you will want to save as such. File > Export
Once clicked, a menu will appear to choose the save destination. Here is where you will change the file type to SVG. At the bottom of the window, a default setting of PNG will be selected, change this to SVG.
Following your choice of file type, you should see this.
At this point in time, you have two options to save your SVG. One is to save the image just as you would any other bitmap image OR to extract the SVG Code. To reap the benefits of manipulating your code in your CSS/JS, you’ll want to extract the SVG code.
#1 Save Option
The first and less preferred of the two methods, saves it as a file with the extension .svg which may be easily placed in your code just as any other picture. This is done by simply pressing “Ok” during the step above. ^
To utilize this image type in your code, once may implement this file type as:
img
<img src="logo.svg" alt="Luke Logo">
background img
.logo {
background-image: url(logo.svg);
}iframe
<iframe src="logo.svg"></iframe>
embed
<embed type="image/svg+xml" src="logo.svg" />
object
<object type="image/svg+xml" data="logo.svg"></object>
#2 Extracting the SVG code
When utilizing SVG images in your code, this is the way to go. Extracting the code and implementing it inline will not only save an HTTP request (as it wont have to go looking for a file type because it is strictly code), but will also grant us the ability to fully manipulate our image.
To do this, instead of pressing “Ok”, we will press “Show Code”.
Once done we should see this.
Although a little intimidating and quite hefty in size at times, this chunk of text can simply be copied and pasted straight into our code where you want the image to appear!
Next Up
Stay tuned for my next post as we go into detail on how to divide your SVG code into both HTML and CSS to alter your image and clean up your XML code!.