You have heard a lot about JPG images, PNG images, GIF images, Bitmap images, etc. They are all raster images. They are drawn on pixels. What about Vector?
You draw a line, it is pixels, pixels, pixels, and more pixels on a grid. You draw a circle; the story doesn’t change. It is all a game of pixels.
That’s okay when it comes to photography, or when you are looking at low-density screens – that is anything below retina.
The problem with a raster image is that when you try to magnify it, it looks awful! It will get pixelated.
Look at this:
Look at how the smaller icon looks sharp enough, but the scaled-up version looks hazy. That is what happens when you try to magnify a raster image. It doesn’t matter in which format that raster image is in. It may be a JPG, or a PNG, or a Bitmap image.
You try to magnify it or you try to see a raster image or high-pixel density screen, image will look hazy and pixelated.
This is where SVG comes in.
So, the question…
Why SVG?
The main reason why you should go for SVG images is that they are sharp, really, really, sharp!
SVG stands for Scalable Vector Graphics.
For any vector graphic, you don’t draw using pixels.
What you use instead, is mathematic formulae that allows infinite scaling without losing the sharpness.
Because SVG images are pixel-independent, it doesn’t matter what type of screen you use to see them. They will always look sharp.
So, if you are using a retina screen or 4K screen or something higher, you will see crisp and sharp images.
Even if you use any screen with pixel density less than retina, you will still see crisp and sharp images.
That’s the beauty of SVG images.
You can scale or magnify SVG images as much as you want. The images will not become pixelated or hazy. On the contrary, it will start showing tiny details (if any) that you cannot understand in the unscaled format.
So, why SVG?
Because it is sharp and crisp!
The absence of pixels removes the limitations from SVG because they are always drawn using mathematically declared curves and shapes, making them sharp irrespective of the screen type, irrespective of the magnification.
Because SVG is always sharp and crisp, SVG images are great for people who have some visual impairments.
What makes SVG so flexible?
We just learned that SVG images are very sharp. But what makes them so flexible? The flexibility comes from the ability to resize infinitely without losing sharpness.
The problem with JPGs or other raster images is that they will immediately start losing their sharpness the very moment you resize them beyond their natural size.
So, if you take a JPG image that is 500 x 500 pixels, and try to resize it to even twice the size, the image will immediately lose sharpness.
This isn’t the case with SVG.
The work around with raster images is to make them really big right from the beginning. This means that even if you are using a larger screen or a retina (and beyond) screen, the large raster image will retain the quality.
The downside of using a large raster image is the loss of performance.
A very large raster image which will retain the sharpness on larger screens, but it will be very heavy.
Imagine using a JPG file that weighs 10 MB on a web page.
That’s not ideal!
Your webpage will slow down to such an extent that people will get frustrated and leave your site for good. They will never return.
Do you really want that to happen?
You can circumnavigate this problem with an SVG image. You don’t have to have a very large file. An SVG image which is as small as 1 KB can scale exponentially without getting pixelated, or without losing sharpness.
This means that from the performance perspective, an SVG image is a far better option. It will keep the size of your webpage small, and allow room for faster page load times. This is precisely what Google wants.
Bottom line?
The two things that make an SVG image so flexible are:
- Its ability to retain size even when scaled infinitely.
- Its ability to improve performance, because of small size.
Talking of size, SVG images can be of incredibly small size. That’s the reason why most of the websites often use SVG logos and various other SVG images to ensure that the overall page size remains small.
Why is SVG small? Is it always small?
I did say that a SVG image is small.
That’s not really an accurate statement.
The size of any SVG image is not dependent on how large the image is. In fact, it is dependent on how complex is the drawing.
It really doesn’t matter at what size you are rendering your SVG file. It will always and always retain the sharpness.
Let’s take an example of a raster image of dimensions 500 x 500 pixels. That’s 250,000 pixels of information in that image.
On the contrary, if you are creating an SVG image on a 500 x 500 pixels artboard, the pixels don’t matter. What matters is the set of instructions you are using for drawing.
If the instructions are few and simple, the size of your SVG image will be much smaller.
But if the instructions are too complex, the story changes.
For instance, if you are drawing an SVG image depicting a beautiful woman standing underneath an oak tree with many leaves, the instructions for drawing that image will become really complex.
This is when your vector or SVG image can be bigger while the raster format might be much smaller!
One of the best ways to decide whether you want to go for SVG or raster is to test, test, and test.
Yes, you must create the same image in both formats, optimize them, and then test.
Here are some image types that usually should be in SVG format:
- Icons
- Logos
- Maps
- Charts
- Simple illustrations
But do keep in mind that it is not necessary that these images should always be in SVG format. For instance, the logo of Mozilla Firefox is quite complex, and in most likelihood, it will be better to create a raster image for that logo.
Using SVG on Webpages
I said that you can use SVG on your webpages in form of logo, icon, maps, charts, etc. But how do you do that? You can use SVG in both CSS and HTML as well.
Let’s look at some of the commonest methods of using SVG on a webpage.
Method 1: Use <img> tag
One of the easiest ways of using an SVG image on a webpage is to use the <img> element. For that, you need to reference the SVG image in the src attribute, exactly the same way you would do that for any other type of image.
Do not forget to add the height and width attribute.
A simple example will be:
<img src=“heart.svg” alt=“a red heart” height=“50px” width=“50px” />
There are several advantages of using this method. Here’s how you benefit:
- It is quick and easy.
- You can wrap it using <a> tag, which will convert the image into a hyperlink.
- You can use CSS for affecting the image.
However, do remember that manipulating the image’s content using external CSS or JavaScript will not be possible when you use this method.
But you are definitely free to use inline CSS in the SVG image code.
Method 2: Inline SVG in HTML
This is one of the most popular methods that modern WordPress theme (example, GeneratePress) developers use.
How do you do this?
It is as simple as opening the SVG image using any text editor (right-click on the image and then open it with a text editor).
When you open the image with a text editor, you will get the code of the SVG image. Now copy the code and paste it directly into your HTML document.
This method is known as inlining SVG.
A benefit of inlining SVG is that there will be fewer HTTP requests, thereby reducing your page loading time (that is, make your webpage load faster).
The code for any SVG image starts and ends with <svg> and </svg> tags, respectively.
Here is a sample code:
<svg id="Layer_1" enable-background="new 0 0 100 100" height="512" viewBox="0 0 100 100" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m10.693 72.82 1.97-7.296 1.932.522-1.208 4.469 4.714-.513.216 1.989z"/></g><g><g><path d="m11.806 70.31h2v1.5h-2z" transform="matrix(.707 .707 -.707 .707 53.998 11.758)"/></g><g><path d="m14.074 71.205-1.47-1.357.007-.008z"/></g><g><path d="m16.207 69.072-1.414-1.414 2.164-2.165.848.847-.824-.87.008-.007 1.383 1.444zm4.306-4.306-1.391-1.437 2.164-2.165.767.767-.718-.812.008-.007.761.87.597.597-2.164 2.165-.707-.707zm4.303-4.306-.718-.812-.647-.648 2.164-2.165 1.445 1.382-.828-.765.797.797-2.164 2.165-.707-.707zm4.355-4.352-1.391-1.437 2.164-2.165 1.445 1.382-.828-.765.797.797-2.164 2.165-.707-.707zm4.351-4.352-1.445-1.382.007-.007.731.682-.707-.707 2.172-2.171 1.414 1.414-1.404-1.391 1.397 1.398zm4.33-4.328-1.421-1.407.007-.007.707.707-.707-.707 2.165-2.165 1.445 1.382-.828-.764.797.796zm4.329-4.329-1.445-1.382.007-.007.731.682-.707-.707 2.164-2.165.848.847-.824-.87.008-.007 1.383 1.444zm4.329-4.329-1.445-1.382.007-.007.731.682-.707-.707 2.164-2.165.767.767-.718-.812.008-.007.761.87.597.597zm4.305-4.307-1.391-1.437 2.164-2.164.848.848-.824-.87.008-.007 1.383 1.444-2.164 2.164-.707-.707zm4.33-4.329-1.375-1.452.008-.007z"/></g><g><path d="m55.168 30.111-1.414-1.414 1.354-1.355 1.917.007-.007 2-1.083-.004z"/></g><g><path d="m57.032 29.349-.011-2h.011z"/></g><g><path d="m85.645 29.456-.01-2h.01zm-3.169-.012-.009-1.594-.006 1.594-3.181-.012.004-1-.046.999.05-1.999 3.188.012zm-6.362-.024-.009-1.594-.005 1.594-3.18-.012.002-.407-.009-1.593h.011v1l.004-1 3.187.012v2zm-6.36-.023-.009-1.594-.006 1.594-3.181-.012.004-1-.046.999.05-1.999 3.188.012zm-6.36-.024-.009-1.593-.006 1.593-3.181-.012.008-2 3.188.012z"/></g><g><path d="m85.645 27.459h1.5v2h-1.5z" transform="matrix(1 .004 -.004 1 .103 -.309)"/></g></g></svg> The more complex your SVG image is, the more complex is the code!
One great thing about inline SVG is that it becomes open for CSS manipulation. You can put the CSS styling rules directly into the SVG image code, or you can put the styling code in the place where you put the CSS style rules for your HTML document.
In case of WordPress, most of the themes allow adding additional CSS. You can place the styling code in the additional CSS segment of the theme through the live customizer.
Do not forget that to add CSS styling to your SVG image, you will need to assign classes and ids to the SVG image.
Method 3: Use SVG in CSS
If you want to use SVG image as a background in CSS, you can do that as well. Here is a quick example of using SVG in CSS:
Note that the URL segment should be the actual URL where the SVG image can be found.
The “.element” part of the code you see above (which is an example code), is the class and id.
You can more to the CSS code you add. For instance, you can set parameters for scale, position, repeat, etc.
Styling is up to you!
Did You Know?
There was a time when people used to use the <object> tag for using SVG.
That, however, has stopped.
Why has it stopped?
In the past, using the <object> tag for SVG allowed retaining the interactivity of the SVG image. Interactivity simply means animations and hover effects.
You can even use <iframe> or <embed> to use SVG.
Here is a classic example:
See the Pen dyNyLmB by Sankalan (@sbaidya) on CodePen.
See how the SVG images of the shopping cart (icons in this case) are animated? Observe the codes. One uses <iframe>, another uses <object>, and the last one uses <embed>.
You can use these methods, but you don’t need to!
You can always use the <img> tag, because modern browsers support SVG interactivity even when used as an image using the <img> tag.
So, if you need animation, you don’t have to go back to the old ways.
SVG Coding and Making Shapes
SVG Coding
To code SVG, you need to know the XML-based language that is used for describing vector images.
I am not going to teach you XML coding here. You must do that by yourself. There are many online resources that you can use. Teaching XML coding is beyond the scope of this article.
Just like HTML, XML is a markup language. But XML has the ability of defining various shapes for creating images using a wide variety of elements.
XML also has the capability of applying effects to the shapes you create.
How you want to code SVG is up to you.
You can code SVG along with your HTML, or decide to code SVG and inline them in your HTML. You can code SVG in separate files as well, and later include them in your HTML.
Here is a sample code for SVG image that produces a circle and a rectangle:
<svg version=”1.1″
baseProfile=”full”
width=”300″ height=”200″
xmlns=”http://www.w3.org/2000/svg”>
<circle cx=”150″ cy=”100″ r=”90″ fill=”blue” />
<rect width=”100%” height=”100%” fill=”black” />
</svg>
What do these cx, cy, r, etc., mean? We will get there.
Keep reading.
Making Shapes with SVG
You can create some very basic shapes in SVG with ease. For example, you can create circles, rectangles, polygons, lines, curves and paths.
Let’s find out how to do that.
Making a circle
To make a circle in SVG, you will need three attributes. Those three attributes are:
- cx: The x position of the circle’s center.
- cy: The y position of the circle’s center.
- r: radius of the circle.
With these three attributes, your SVG code for making a circle will look something like this:
<svg version=”1.1″
baseProfile=”full”
width=”200″ height=”200″>
xmlns=”http://www.w3.org/2000/svg”>
<circle cx=”50″ cy=”50″ r=”40″ stroke=”red” stroke-width=”3″ fill=”cyan” />
</svg>
You can simply type this code in a notepad and save it as circle.svg.
When you try to open the circle.svg file using a browser, you will most likely see this:
“This XML file does not appear to have any style information associated with it. The document tree is shown below.”
That’s fine, don’t panic!
You can test the code using codepen.io. Here is how it looks like:
You can simplify the SVG code above and still get the same result. Here is the simplified SVG code:
<svg width=”200″ height=”200″>
<circle cx=”50″ cy=”50″ r=”40″ stroke=”red” stroke-width=”3″ fill=”cyan” />
</svg>
Just try it out!
Making a rectangle
Here is the SVG code for making a rectangle:
<svg width=”400″ height=”100″>
<rect width=”400″ height=”100″ style=”fill:yellow;stroke-width:10;stroke:black” />
</svg>
When you are drawing a rectangle in SVG, you need to define the width and height of the rectangle. You should also define the styling.
The part ‘rect’ refers to rectangle.
Once you put this code in codepen.io, it looks like this:
Now, what if you want rounded corners for your rectangle?
This is the SVG code for a rounded rectangle:
Here is the code for the rounded rectangle:
<svg width=”400″ height=”180″>
<rect x=”40″ y=”20″ rx=”20″ ry=”20″ width=”350″ height=”150″
style=”fill:red;stroke:black;stroke-width:5;opacity:0.5″ />
</svg>
Making a polygon
You can even make a polygon in SVG. The only thing is that you need to define the points of the polygon.
Here is a typical polygon example:
<svg width=”300″ height=”200″>
<polygon points=”100,10 40,198 190,78 10,78 160,198″
style=”fill:pink;stroke:green;stroke-width:5;fill-rule:evenodd;” />
</svg>
This code is for a star, which is a polygon. You can style it with fill and stroke. You can even define a styling rule for the fill.
Here is the end result of the code:
What happens if you don’t define the fill rule?
In that case, here is the code:
<svg width=”300″ height=”200″>
<polygon points=”100,10 40,198 190,78 10,78 160,198″
style=”fill:pink;stroke:green;stroke-width:5;” />
</svg>
Note that I have removed the fill rule. The visual result for this code is:
Making a line
To make a line in SVG, you need to use the <path> element. It is a powerful element that you can use for creating lines, arcs, curves, and more.
When you want to make a straight line, you need to define the path for which you have to use the d element.
To create the line, you need to move the line’s starting point. There are two parameters to use. The first one is M, which you use to define the absolute positioning. The second option is m, which you use for relative positioning.
Finally, you need the L command for drawing the line all the way up to the new point where you want the line to end.
You can use style attributes.
Here is an example code:
<svg width=”600″ height=”400″>
<path d=”M 10,10 L 250,250″ fill=”transparent” stroke=”red”/>
</svg>
The eventual result for this code is shown below:
What if you want to draw multiple lines with different points connected to each other?
Here is a sample code:
<svg width=”600″ height=”400″>
<path d=”M 10,10 L 250,250 2,150 150,50″ fill=”transparent” stroke=”red”/>
</svg>
This is the result you get from the code:
Making a curve
In case of a straight line, you had to use the L command. In the case of curves, you have to use the C command.
A sample code for a simple curve is:
<svg width=”600″ height=”400″>
<path d=”M50 50 C 50 50, 150 100, 250 50″ stroke=”red” fill=”transparent”/>
</svg>
Here is what it looks like when you render the code:
Note that as in the case of a straight light, to draw a curve, you still need to start with the d element. The M element will define the absolute positioning from where the curve will start moving.
The C command allows you to set the start point, the anchor point, and the end point!
What if you want to make a more complex curve?
The one you see above is a simple curve, and also an arc.
To create a more complex curve, here is the sample code:
<svg width=”600″ height=”400″>
<path d=”M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80″ stroke=”red” fill=”transparent”/>
</svg>
Notice the S element. This is the one that you will need for drawing a complex curve. The sample code above renders the following:
Making Complex SVG Images
Everything you read till now is cool, but what if you don’t know how to code SVG?
Can you not work with SVG?
Of course, you can!
For instance, you want to use an SVG logo for your site, but you don’t know how to code it. Your best option here will be to use a simple SVG generator available online and create a logo.
The problem with this method is that you will fail to make complex logos. Generally, text logos work best with this method.
If you want to create complex logos, you need a software program that will allow you to design a vector logo and save it as an SVG image.
Adobe Illustrator is one of the best options here, but there are various other powerful alternatives that you can rely on.
Using any such vector editing software, you can create a complex logo, and then save it as SVG!
Here is a sample image I created (not for anyone) in under 60 seconds:
Now, this is a complex image with gradients, text, and more.
Coding this entire thing manually is extremely difficult. However, Adobe Illustrator allowed me to save the file as an SVG image.
The code for this SVG image is huge. It becomes virtually impossible to manually code it and get everything right!
Since Adobe Illustrator allows saving in SVG format, it simply means that it natively supports SVG. If you want to change anything, you can just edit the SVG file as you would with the .ai files that Adobe Illustrator produces.
Now, if you are on WordPress, you can upload the image directly to your WordPress site (of course, you will need a plugin that will enable SVG image upload, because WP doesn’t natively support SVG for security reasons).
Other Software You Can Use
Adobe Illustrator isn’t the only software program you can use. There are several others. Here is a quick list:
- Inkscape (works on Windows, Mac, and Linux). It is free.
- Sketch (available only on Mac).
- WebCode (Mac only).
- iDraw (Mac and iOS).
- Method (browser based).
There are also online software for creating SVG Logos
You can find more such software program if you search properly.
What if you don’t know designing?
Well, that’s a problem! You will have two options left in that case.
- Hire a designer.
- Get SVG or vector images from various online sources like Adobe Stock Photos, Flaticon, etc.
The problem of hiring a designer is the cost, of course, communication. The problem of using websites like Adobe Stock Photos, Flaticon, etc. is that you may not find the exact thing you are looking for. This means, you have to ask a designer to edit the image to your liking!
Working with Texts
SVG is not just about images. You can create SVG texts as well, and use them on the web. Using SVG text can be beneficial from the SEO perspective.
Creating text with SVG
To create text using SVG, you need to use the <text> tag.
Here is a quick example:
<svg height=”30″ width=”200″>
<text x=”0″ y=”15″ fill=”red”>I love SVG!</text>
</svg>
This is the output you get:
The x and y parameters you see in the code determine the position of the text.
Of course, you can set some styling like stroke, color, etc.
You can define font-family, font-weight, font-weight, font-stretch, font-variant, font-size, letter spacing, kerning, font-size-adjust, and text decoration.
You can either code these things directly into your SVG code, or you can use CSS declaration.
SVG will even allow strokes, fills, directions, rotation, and more.
Here is a small example with a reverse text direction:
<svg height=”300″ width=”1000″>
<text x=”550″ y=”50″ style=”fill: none; stroke: #000000; font-size: 48px; direction: rtl; unicode-bidi: bidi-override;”>MY NAME IS JOHN DOE</text>
</svg>
Here is the output of the code:
SVG will even allow you to the xlink:href attribute to align text along a path. You can draw a path and attach a text to it.
Here is a sample:
<svg height=”300″ width=”1000″>
<path id=”my_path” d=”M 40,40 C 200,100 10,100 520,200″
fill=”transparent” />
<text>
<textPath xmlns:xlink=”http://www.w3.org/1999/xlink” xlink:href=”#my_path”>
This Text is Curved
</textPath>
</text>
</svg>
When you render this code, this is what you will get:
SVG text styling
There are a couple of options you can use. You can use the CSS style inline, that is, right into the SVG code.
Here is a quick example:
<svg width=”450″ height=”60″>
<text>
My Name Is <tspan font-weight=”bold” fill=”red”>JESSICA DOE</tspan>
</text>
<style><![CDATA[
text{
dominant-baseline: hanging; font: 28px Verdana, Helvetica, Arial, sans-serif;
}
]]></style>
</svg>
Here is what you will see when you render it:
However, you are not limited to using the CSS inline. You can output your CSS separately.
Here is an example:
<svg class=”rectangle” width=”400″ height=”400″ viewBox=”0 0 400 400″>
<rect class=”box” x=”0″ y=”0″ width=”400″ height=”400″ fill=”#009eed” />
</svg>
Note that code draws a rectangle with a fill color of #009eed.
This is the output of the code:
However, you can change the color of the rectangle using a separate CSS code that you can output elsewhere.
Here is what I mean:
Notice carefully!
I used the CSS (check the CSS panel):
.box {
fill: red;}
I did use the class ‘box’ in the original SVG code. I then referenced the class in CSS. So, despite the fact that the original SVG code remained intact, I changed the color of the rectangle (square) using CSS.
So, the CSS actually overrode the inline coloring (#009eed).
You can do a lot more with CSS!
SVG 2.0 Pep Talk
Did you know that we are currently using SVG 1.1?
All modern browsers support this version of SVG.
There is work in progress on SVG 2.0, which is currently in the candidate recommendation stage.
Modern browsers do not support it yet, and hence, it is not used.
Of course, SVG 2.0 will come with great enhancements. It will remove various features available in SVG 1.1 and include several new features from Web Open Font Format and HTML5.
For instance, the version 1.1 uses glyphs. These font elements will be removed in version 2.0, and the WOFF font format will be introduced.
Also, 2.0 will remove the xml:space attribute in favor of CSS.
The latest draft of SVG 2.0 was released on 26 May 2020. We don’t yet know when it will be released formally. When it comes out, it will be much more compatible with modern web technologies like CSS, DOM, HTML5, etc.
As of now, the only thing we can do is wait for its formal release!
