When you see graphics on a website, you normally think that it was created by a camera or even perhaps a software tool like Adobe Illustrator. You might realize this in the back of your head but don’t think about it every day—that image is just a bunch of computer code that is being displayed as a visual image on your monitor.
Scalable Vector Graphics (SVG), also known casually as “vectors,” are graphics that can be rendered by drawing software or by writing code.
It’s simple to demonstrate in HTML. If you code this:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg>
You get this:
Or you can draw a line:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="0" y1="0" x2="200" y2="200"style="stroke:rgb(255,0,0);stroke-width:2"/> </svg>
So you can see that graphics can be delivered with code. This is useful if you are dealing with pie charts, line graphs, or bar graphs. As the numerical values of your data change, the graphical representaion can scale along with it.
[basic_list]
[/basic_list]