6. Example
(path)
Set up attributes
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path
Attribute d
This attribute defines a path to follow.
Attribute fill
This attribute is a presentation attribute that define the color of the
interior of the given graphical element.(*)
Attribute stroke
This attribute defines the color of the outline on a given graphical
element.The default value for the stroke attribute is none.
Attribute stroke-width
This attribute specifies the width of the outline on the current object.
Its default value is 1.
<svg width="100%" height="100%" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<path d="M 100 100 L 300 100 L 200 300 z" fill="orange" stroke="black" stroke-width="3" />
</svg>
7. Example
(circle)
Set up attributes
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle
Attribute cx
this attribute define the x-axis coordinate of the center of the
element.
Attribute cy
this attribute define the y-axis coordinate of the center of the
element.
Attribute r
this attribute defines the radius of the element. A value of zero
disables rendering of the circle.
Attribute fill
Attribute stroke
Attribute stroke-width
<svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="60" cy="60" r="50"/>
</svg>
8. Example
(text)
Set up attributes
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="30px" viewBox="0 0 1000 300">
<text x="250" y="150" font-family="Verdana" font-size="55"> Hello, out there </text>
<!-- Show outline of canvas using 'rect' element -->
<rect x="1" y="1" width="998" height="298" fill="none" stroke-width="2" />
</svg>