Notes about SVG commands
Last updated at 4:50 pm UTC on 22 October 2020
SVG coordinate system, viewport and viewbox
images
https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#image
In an HTML file:
If you have the svg code in a file you may use it directly as an image in a HTML file
<img src="bird.svg" alt="Bird">
An image in an SVG file
SVG image
group element <g>
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g
The transform attribute may be applied to a group: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform
SVG minimal document - LODraw export
polyline element
The <polyline> SVG element is an SVG basic shape that creates straight lines connecting several points.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline
path
the most complex element. It uses a simple command language to describe a path
- Move to command,
- line to command
- Bezier curves
- Arcs
see https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
The "d" attribute contains a series of commands and parameters used by those commands.
Example:
M is the 'moveTo' command. As it is upper case it means 'absolute coordinates' which are 2000 @ 0000.
H is horizontal move, V is vertical move, L means 'line from current point to new coordinate'.
SVG construction example 6 - path
