What is SVG
So you may have seen the acronym SVG and wondered what does that mean, or what is that type of format used for? SVG stands for Scalable Vector Graphics. It is an Extensible Markup Language(XML) based on vector- image format for two dimensional graphics with support for interactivity and animations. Due to SVG files being defined in XML text, this allows it to be searched, indexed, scripted, and compressed. SVG files work with all text editors and all major web browsers. SVG was initially released by W3C on September 4, 2001.
Raster vs Vector
There are two main categories of image formats, Raster and Vector. Raster files include PEG, PNG, TIFF, WebP, XCF. Whereas Vectors are PDF and SVG. Raster format is great for high definition pictures. This is because Raster files are composed of a fixed set of pixels.These pixels are stored in a grid of colored squares known as a bitmap. Similarly how are television displays pictures.SVG is best used for Logo design, Diagrams, Animated elements, and also Charts and Graphs. A vector image is composed of a fixed set of shapes and store images as a set of points and lines between points. SVG file size is usually smaller in comparison to its counter part. Because of how an SVG is composed it allows the image to be resolution-independent and also is able to scale indefinitely.
If your programming language is Javascript below you will find an example of how to create your first SVG image and also a breakdown of each part of the code it entails.
Step 1: Create an HTML document and give it some of the basics like a header and a body.
Step 2: Inside the body element, create an SVG tag and give it a height and width like so…
<svg height=”200" width=”200"></svg>By inserting this line of code you have now created box and designated the size. Almost like a div but you are defining it yourself.
Step 3: Define your shape. This will be included inside your SVG tag.
<circle r=”20" cx=”20" cy=”20" />Within the circle tag the first thing we define is “R” and set it equal to 20. This is setting the radius of the circle which is the distance from the center of the circle to the edge. Next we define “CX” and “CY” and set them both to 20. When we originally created our SVG element we set a height and width to 200 each. This creates a small little map where our shapes are put in. So CX refers to the X axis in our map and CY refers to the Y axis .
the final piece of code should look like this….
<svg height=”200" width=”200"> <circle r=”20" cx=”20" cy=”20" /></svg>
Congratulations! You have created your first SVG image. It should look like the circle below.
