Make Images with Simple Code: Get Started with SVG
Create images with SVG. Every HTML developer should have a basic understanding of Scalable Vector Graphics. This article tells the basics of SVG, and we also make an umbrella out of code.
SVG. Scalable Vector Graphics.
A way to create images in HTML.
One of the many cool things HTML offers, that very few people care about (Just like my laptop is very cool, but I never care about it 😆).
There is no reason not to use SVG. Imagine creating Images with code. That too HTML and XML code. And on top of that, SVG images never lose quality when sized up or down.
Check out unDraw and getwaves. These tools also use SVG images.
You can create SVG in any text editor. And the files are pure XML, which is similar to HTML. Infact, it is very easy to learn:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
</svg>That is how simple SVG files are to write.
Let’s get started and create the above umbrella image with code.
Set up the basic file
Create a file with the extension .svg or .html . I would recommend using the .svg extension, but the choice is yours.
Create the SVG wrapper element. All our code for the SVG would go into this wrapper.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
viewBox="-100 -100 200 200" width="500" height="500">
...Code Goes Here...
</svg>It is not necessary to define the version, but the xmlns part is important. Otherwise, the browser might just be mad at you and not render the image.
Usually, the SVG coordinate system starts at top left corner (0, 0) and the bottom right corner coordinate would be (width, height).
But, using viewBox, you can change this. In the above code sample, the coordinates are set to start at (-100, -100) at the top left corner as they are the first 2 parameters, (0, 0) in the middle and the last two parameters of viewBox are the height and width of the viewBox. So, the bottom left corner’s coordinates would be (-100 + width, -100 + height) or (100, 100).
In fact, let us draw a circle at the center of the viewBox at(0, 0). Add the following inside the SVG element:
<circle cx="0" cy="0" r="10"/>Here, cx mean the X coordinate, cy means the Y coordinate, and r refers to the radius of the circle.
NOTE: Without setting the viewBox, you will get completely different results, as (0, 0) will mean the top-left corner. After setting the viewBox, we made the top left as (-100, -100).
Change the border color using stroke and the circle’s color using fill. rgb, hex, hsl and directly writing the color you want are all acceptable.
<circle cx="0" cy="0" r="10" stroke="#00ff00" fill="green"/>
You will find a circle at the center of the SVG element. Not the best artwork I’ve seen, but it’s a good start. Play around with the coordinates, radius and colors and see the changes.
Now, let us draw a rectangle.
<rect x="-20" y="-10" width="40" height="20"/>You can use stroke and fill for changing colors just like above.
<rect x="-20" y="-10" width="40" height="10"/>
<rect x="-20" y="-40" width="10" height="70"/>
<rect x="20" y="-40" width="10" height="70"/>
Think our artwork is getting better?
Create a hexagon in SVG
Why a hexagon? No reason in particular.
Use the polygon tag for defining points. Minimum 3 points are required to make a shape (one of the first things my math teacher taught me).
<polygon points="0,-50 40,-25 40,25 0,50 -40,25 -40,-25"/>
The above image is labelled with coordinates, which won’t show up on your SVG image. Notice how all these coordinates are defined in order starting from the top and going right. That’s what the points attribute is for (That seemed pretty obvious, right😕?).
The overpowered path
You can use pathto create your own custom path (Wow, what an explanation 😆). You can define a set of points, draw curves, make shapes. In reality, it is among the only elements you might ever need to use.
<path d="COMMANDS"/>‘d’ means draw. As for commands: M — Move to, L — Line to, Q — Quadratic Bezier. A full list of commands is available here.
This is how the commands would look like: M -50 0 L 50 0 meaning move to the point (-50, 0) as denoted by ‘M’ and draw a line from there to (50, 0) as denoted by ‘L’. When you use capital ‘L’, it is absolute positioning.
However, a command like M -50 5 l 40 -3 with a lower case ‘l’ would mean relative positioning. First move to (-50, 5) as denoted by ‘M’ then move 40 units right and -3 units down as denoted by ‘l’. In other words, we move (40, -3) units away from the current location when using lower case ‘l’.
This upper case and lower case rule is similar for all other commands as well. Upper case means absolute positioning and lower case means relative positioning (Okay, how many times will I be saying that. I know you guys understood 😄).
Let’s make a triangle with path.
<path d="M -50 0 L 0 -50 50 0" fill="blue"/>
Make curves
Make a quadratic curve. Quadratic curves work something like this:
From the image, we see that we need only 3 points: a starting point A, a control point C and ending point B. The command of the above curve (blue color) is M -40 0 Q 0 -90 40 0 we move to a point (-40, 0) and then comes the Quadratic Curve command. (0, -90) is the control point C and (40, 0) is the end point B.
Very simple, isn’t it.
Infact, that is how we will make the top part of the umbrella.
We are basically just adding curves on top of one another. The code is below:
<g>
<path d="M -50 0 Q 0 -70 50 0" fill="#37ada7"/>
<path d="M -35 0 Q 0 -70 35 0" fill="#18857f"/>
<path d="M -20 0 Q 0 -70 20 0" fill="#37ada7"/>
<path d="M -7.5 0 Q 0 -70 7.5 0" fill="#18857f"/>
</g>What is that <g> doing there, you ask? It is pretty much like <div> in html, useless on its own, but can have child elements. This is useful in cases where you have many elements grouped together, and you want to move them all to a side.
Let’s move the umbrella 50 units to the right and 3 units up.
<g transform="translate(50,-5)">
...The transform element controls the position and the rotation. In the above example, we moved it 50 units right and -5 units down (or 5 units up) using translate(). We can rotate our umbrella the same way.
<g transform="translate(50,-5) rotate(100, 0, 0)">
...
Not a very useful umbrella if it is rotated like that, so let’s remove the rotations. And the translation.
Let’s now make the handle using <polygon>.
<polygon points="-2,0 2,0 2,65 -2,64.9"/>
A little curved end at the handle would be nice. Let’s create a quadratic curve again.
<path d="M -.3 64 Q 5 75 10 57" stroke="black" fill="black" stroke-width="4"/>
This is simply a quadratic line that has been made thicker by using stroke-width which set’s the width of the line to 4.
Now let’s make the raindrops.
<g class="raindrop">
<path d="M -4 0 Q 0 9 4 0" fill="#99edf3"/>
<polygon points="-4,.1 4,.1 0,-7" fill="#99edf3"/>
</g>The class= “raindrop” is not necessary, it is just to make it easier to understand. The path and polygon tools create a good raindrop. And by raindrop, I mean a quadratic curve with a triangle on top.
Now create a few copies of the raindrops, and give them different translations, and set them to different places without the image.
If you liked my writing, you can show your support by:
- Clapping on this story
- Following me for more content on HTML, CSS, JS, Frontend, Python and ML.
- Or doing both of the above
- Or doing option 3 😆
Your imagination is the limit. Make amazing SVG images and use them for various purposes. You can read more about them on (w3schools.com). Thanks for reading the article this far.
