DEV Community

Cover image for SVG 101: What Is SVG?
Play With Codes
Play With Codes

Posted on • Edited on

SVG 101: What Is SVG?

#svg #design #devops

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" />
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)