This content originally appeared on SitePoint and was authored by Craig Buckler
In this article, you’ll discover the basic concepts, document structure, and drawing elements used in SVG images.
If you’re completely new to SVGs, it may help to read the following articles first:
SVG Co-ordinate Grid
An SVG is defined in whatever co-ordinate space you give it. That space does not necessarily correlate with pixels, centimeters, inches, or other absolute units, because an SVG can be scaled to any dimension.
The SVG’s viewBox attribute determines the co-ordinates the image uses. The following SVGs would look identical when scaled to the same size:
- a
viewBoxof0,0to200,100with a line from0,0to100,50 - a
viewBoxof0,0to300,150with a line from0,0to150,75 - a
viewBoxof0,0to30,15with a line from0,0to15,7.5(fractions of a unit are permitted)
Unlike mathematical graphs, the SVG co-ordinate system starts at the top left (usually 0,0) with the x-axis pointing right and y-axis pointing down. Therefore, a point at 100,200 represents 100 units to the right of the left hand edge and 200 units down from the top edge.
When an SVG is rendered, it can be given width and height attributes or assigned dimensions in CSS. The image will be stretched or squashed in both directions to fill the space it’s been allocated. However, an SVG can declare that its aspect ratio can be preserved to ensure dimensions are scaled consistently.
Continue reading Scalable Vector Graphics: Drawing Basics on SitePoint.
This content originally appeared on SitePoint and was authored by Craig Buckler
Craig Buckler | Sciencx (2020-11-24T15:59:16+00:00) Scalable Vector Graphics: Drawing Basics. Retrieved from https://www.scien.cx/2020/11/24/scalable-vector-graphics-drawing-basics/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.