SVG 101: What Is SVG?

So, What Is SVG and Why Should You Use It?

SVG is an eXtensible Markup Language (XML)-based vector graphic format for the Web and other environments. XML uses tags like HTML, although it’s stricter. You cannot, for example, omit a closing tag since this will make the file invalid and the SVG will not be rendered.

To give you a taste of what SVG code looks like, here’s how you would draw a white circle with a black border:

<circle cx="100" cy="100" r="50" stroke-width="4" stroke="#000" fill="#fff" />

SVG is a W3C standard, which means that it can inter-operate easily with other open standard languages and technologies including JavaScript, DOM, CSS, and HTML. As long as the W3C sets the global industry standards, it’s likely that SVG will continue to be the de facto standard for vector graphics in the browser.

The awesomeness of SVG is that it can solve many of the most vexing problems in modern web development. Let’s breeze through some of them.

• Scalability and responsiveness
• Programmability and interactivity
• Accessibility
• Performance

Thanks