Why should we even bother with SVG ?
Well, it's a good question and to answer it we should first understand what SVG is. SVG stands for Scalable Vector Graphic. Files in this format use an XML-based text format to describe how the image should appear.
Since text is used to describe the graphic, an SVG file can be scaled to different sizes without losing quality - in other words, the format is resolution independent, unlike JPEGs or PNGs which are made out of pixels. This is why websites and print graphics are often built in the SVG format, so they can be resized to fit different designs in the future. This can also make sense if you are a tattoo artist and design your work digitally before printing it.
Take a look at two examples below:
The first image was created in Photoshop as a 1280x720 px project and saved as PNG. The second one was created with Illustrator with the same project size and saved as SVG.PNG Version
You can quickly notice that while zooming the SVG version maintains the same quality, but the PNG one gets blurry and also the image gets slightly stretched in order to fit the image container.
Obviously, JPEGs and PNGs cannot be fully replaced as most captured pictures are in these formats and it wouldn't make sense converting them in SVGs, but if you are looking to create logos and print them on merchandise or embed them into HTML for your website, SVGs are the way to go.
If you wish to get more in depth on what SVGs are and when to use, then head out to Wikipedia to start the research.
NOW LET'S GET STARTED WITH CREATING OUR FIRST SVG LOGO
STEP 1 - CREATE YOUR ASCII TEXT ART
If you click on the following link and type your text in the designated field, it will be automatically transformed in ASCII text art (you will have various options, font type, size etc)
When you are happy with the result, click on Select & Copy at the bottom of the page.
STEP 2 - OPEN ADOBE ILLUSTRATOR AND CREATE A NEW PROJECT
To create an SVG file, open Illustrator and create a new project.Set the art board to the desired size, I will use 1200px by 600px.
Select the Type Tool and draw an area on the art board for your logo. Paste the content you got from the previous step and increase the font size until it reaches the desired width and height and fills in as much of the art board as possible. Click on Object > Artboards > Fit to Artboard Bounds
The next step is to create an outline of your logo. To do this, with your logo highlighted go to Type > Create Outlines.
After this is complete combine each shape by navigating to Window > Pathfinder and click the combine shapes button.
Next we need to save as an SVG. Click Save As and select SVG. You can keep all of the default setting and save.
STEP 3 - OPTIMISE THE GENERATED SVG CODE
The code generated by Adobe illustrator needs to be optimized.
We can optimize and clean up the SVG generated with a 3rd party tool called SVGO-GUI, which you can download here . After downloading SVGO-GUI and installing it, open it. Simply find your saved SVG and drag it onto the drag and drop area. This tool will clean up all unnecessary elements in the SVG code that can be safely removed or converted without affecting the SVG rendering result. When opened with a code editor, your final SVG should look something like this:
To view the actual image instead of the weird looking text, open the file with a web browser and it should look like this:
01100010 01111001 00100000 00100000 01000011 01101100 01100001
01110101 01100100 01101001 01101111 01000010 01110010 01110100