Scalable Vector Graphics

Scalable Vector Graphics (SVG) is a vector graphics format that describes images with XML. It has been around since 1999 and is supported by all major browsers nowadays.

Vector images can be rendered in any size without becoming fuzzy. This means that you can render the same image on a large retina display or a small mobile phone, and it will look great in both cases.
SVG images are made up of shapes you can create from scratch using paths or put together from basic shapes (for example, lines and circles) defined in the standard. The format itself represents shapes with XML elements and attributes. Since it's an XML-style standard like HTML, quite a lot of what you may already know about HTML also applies to SVG.

As such, SVG code is just a bunch of text you can edit manually, inspect with your browser's normal debugging tools, and compress with standard text compression algorithms. Being text based also means that you can use D3 to create an image in your browser, then copy and paste the resulting XML to a .svg file, and open it with any SVG viewer, such as Preview or Adobe Illustrator.

Another consequence is that browsers can consider SVG to be a normal part of the document. You can use CSS for styling, listen for mouse events on specific shapes, and even move things around using animation. Owing to this, SVG is one of the most powerful tools in the web data visualization arsenal.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset