Exploring SVG Part 1

All you need to know about SVG Shapes

Anish Antony
Javarevisited
13 min readSep 18, 2020

--

This article is a practical guide about SVG. Here we will discuss on ‘how to create different SVG shapes and paths’. If You don’t know about how an SVG drawing created, and you want to explore it, then this is a perfect article for you.

Photo by Markus Spiske on Unsplash

SVG or Scalable Vector Graphics is a universally supported image format for most of the desktop and mobile browsers. One of the essential features of SVG is ‘it is resolution independent’. Which means if you zoom in or zoom out an SVG image, then its clarity won’t lose. Why because the SVG images are created by using mathematical calculations. So if zoom in or zoom out, then it will recalculate the image and display it. Another good thing about SVG is, it is built by using XML. So by using a standard text editor, it can make an SVG. The scope of SVG is relatively larger as compared with the normal images formats such as JPEG or PNG. Using SVG, it can make interactive, stylish and animating creations. The most famous example of SVG is the google map.

How to create SVG

We already talked the basic building block of an SVG image is XML. There are different XML tags available for creating different SVG shapes. By combining those different shapes, it is making a complete SVG creativity or SVG image. It doesn’t require any…

--

--

Anish Antony
Javarevisited

Fullstack Developer | Blogger | Experience on Java, Python, React, Angular, Golang | http://www.behindjava.com