How to draw SVG

This is how the logo was created, but also to show how you can use a graphic you have made and turn it into a SVG build. Then with the SVG you can draw the image with JavaScript.

To start off you will need to know what SVG is, which is a HTML5 tag. This is a very powerful  tag as with this you can draw anything if you either have the patience or the access to software. With the SVG you can draw any design you want with the children tag mentioned below. This is beneficial as it will reduce the load time of the page, increase the responsiveness of the image without loosing quality and you can do what I will discuss below.

Find all the SVG tags here at W3School.

You can use the SVG tags above now to create what ever image you want, but the more detailed it gets the harder it gets. I would suggest the more simple the graphic the easier it will be, though my graphic was anything but simple. A trick I learnt on Adobe Illustrator was how to use the trace functionality. This will convert you image into paths, which are used in the SVG.

Once you have you image in the program, go to the top menu and click on ‘objects’. In the drop down menu there is then ‘image trace’ and within there is the option to trace the image. You can then play around with the setting to choose the best trace for you. After it has finished, you can ‘save as’ the new graphic as a SVG, but before you click save. You should see a button at the bottom that says ‘SVG code’. As it says on the button it will give you the SVG code for the image so you can check out the finished product.

You now you have your SVG code you can use it in your website by either putting the code in directly or the other option is to continue saving the SVG file on Adobe Illustrator. Then import the SVG file like an image, but I would also suggest adding the onerror attribute just in case the browser doesn’t support SVG.


(adsbygoogle = window.adsbygoogle || []).push({});

Lets Draw With SVG

I picked this trick and skill up from Web Designer Magazine just to mention, so you know the source. They show cased it from another website called Web Designer Magazine, but on a much larger scale. From this I though why not use it to draw SVG images, which took me on to this.

Follow the set-up guide on the tutorial here to find out how to create this on the SVG Drawing Tutorial

A little tip for setting you SVG . I found that the SVG code was very very long, so it was hard to format it after pasting it into Visual Studio. To the recuse though, I found a way to do it a bit easier. If you find a website to remove all new lines so that the code is all one line, then use the Visual Studio formatting button to put each tag on one line. Now you can use the mass replace to swap words for character so replicate the format of the required JavaScript. For example

<path d:”M1234″ />

Replace <path d:”

for “path” : “

To produce “path” : “M1234” />

This is an example with visual studio, but if you have any similar product, even notepad, the. You can use the method to save you the time and effort of formatting.

Good Luck and I hope you enjoy this!

Published by Chris Pateman - PR Coder

A Digital Technical Lead, constantly learning and sharing the knowledge journey.

Leave a message please

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: