DEV Community

Bennett Upfield
Bennett Upfield

Posted on


Scalable Vector Graphics

SVGs are a possible alternative to images in html. They are as the title says a Vector Graph. The two main components are the viewbox and the path. Viewbox defines the area of the graph that the SVG will present, so if you say have a line of equation y = 5, and the viewbox is 0, 0, 20, 5, the line will be at the top of the SVG graphic with the graphic only presenting a line segment from x = 5 to x = 20 (the viewbox syntax is x1, y1, x2, y2). The path is the lines that are defined within the graph, which sadly do end and are defined by point to point. The syntax gets a little complicated for this so I'll just send you to the MDN Web Doc.

The Use

SVGs are best used for replacing images that are not to complicated or needs to "scale" as they scale better than a normal .jpg or .png would. So, perhaps instead of a company logo or instead of the simple background image you should use SVGs to display that graphic. Also on a completely unrelated note here is a little program I made to create SVGs (work in progress) Here.

Discussion (0)