HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
A simple SVG graphic example:
Here is the SVG file (saved with the extension SVG SVG file):
SVG code analysis:
The first line contains the XML declaration. Note that the standalone property! This attribute specifies whether the SVG file "stands alone", or contains a reference to an external file.
standalone = "no" means that SVG document has a reference to an external file - in this case, the DTD.
The second and third line references the external SVG DTD. The DTD is located in "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd". The DTD is located W3C, containing all allowable SVG elements.
SVG code <svg> element start, including turning <svg> tag and the closing tag </ svg>. This is the root element. width and height attributes can set the width and height of this SVG document. version attribute defines the SVG version used, xmlns attribute defines the SVG namespace.
The SVG <circle> is used to create a circle. cx and cy attributes define the center of the circle x and y coordinates. If you ignore these two properties, then the dot is set to (0, 0). r attribute defines the radius of the circle.
stroke and stroke-width attribute controls how the outline of the shape. We outline of the circle is set to 2px wide, black borders.
fill color property is set within the shape. We set the fill color to red.
Closing tag closes the root SVG element and the document itself.
Note: All opening tags must have closing tags!