Svg

[saalek110]

<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;" />
</svg>

 

[saalek110]

<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

 

[saalek110]

<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
  <polyline points="0,0 50,150 100,75 150,50 200,140 250,140"
  style="fill:none;stroke:green;stroke-width:3" />
</svg>

 

[saalek110]

<svg height="180" width="500" xmlns="http://www.w3.org/2000/svg">
  <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
  style="fill:yellow;stroke:red;stroke-width:4" />
</svg>

 

[saalek110]

<svg height="210" width="400" xmlns="http://www.w3.org/2000/svg">
  <path d="M150 0 L75 200 L225 200 Z"
  style="fill:none;stroke:green;stroke-width:3" />
</svg>

 

[saalek110]

<svg height="400" width="450" xmlns="http://www.w3.org/2000/svg">

<!-- Draw the paths -->
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="4"/>
<path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="4"/>
<path id="lineMID" d="M 175 200 l 150 0" stroke="green" stroke-width="4"/>
<path id="lineAC" d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="4" fill="none"/>

<!-- Mark relevant points -->
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA" cx="100" cy="350" r="4" />
<circle id="pointB" cx="250" cy="50" r="4" />
<circle id="pointC" cx="400" cy="350" r="4" />
</g>

<!-- Label the points -->
<g font-size="30" font-family="sans-serif" fill="green" text-anchor="middle">
<text x="100" y="350" dx="-30">A</text>
<text x="250" y="50" dy="-10">B</text>
<text x="400" y="350" dx="30">C</text>
</g>

</svg>

 

[saalek110]

<svg height="60" width="200" xmlns="http://www.w3.org/2000/svg">
  <text x="0" y="15" fill="red">I love SVG!</text>
  <text x="0" y="35" style="fill:green;font-weight:bold;stroke:red;stroke-width:1">I love W3Schools.com!</text>
</svg>

 

[saalek110]

<svg height="30" width="200" xmlns="http://www.w3.org/2000/svg">
  <text x="0" y="15" fill="red" rotate="30">I love SVG!</text>
</svg>

 

[saalek110]

<svg height="60" width="200" xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="15" fill="red" transform="rotate(30 20,40)">I love SVG!</text>
</svg>

 

[saalek110]

<svg height="50" width="200" xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="20" style="fill:red;">I Love
    <tspan style="fill:green;font-weight:bold;stroke:red;stroke-width:1">SVG!</tspan>
  </text>
</svg>

 

[saalek110]

Text as a Hyperlink

<svg height="30" width="200"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <a xlink:href="https://www.w3schools.com/graphics/" target="_blank">
    <text x="0" y="15" fill="red">I love SVG!</text>
  </a>
</svg>

SVG Text and tspan

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

[saalek110]

<svg height="200" width="350" xmlns="http://www.w3.org/2000/svg">
  <path id="lineAC" d="M 30 180 q 150 -250 300 0" stroke="blue" stroke-width="2" fill="none"/>
  <text style="fill:red;font-size:25px;">
    <textPath href="#lineAC" startOffset="80">I love SVG! I love SVG!</textPath>
  </text>
</svg>

 

[saalek110]

<svg height="200" width="350" xmlns="http://www.w3.org/2000/svg">
  <path id="lineAC" d="M 30 180 q 150 -250 300 0" stroke="blue" stroke-width="2" fill="none"/>
  <text style="fill:red;font-size:25px;">
    <textPath href="#lineAC" textLength="100%" startOffset="20">I love SVG! I love SVG!</textPath>
  </text>
</svg>

 

[saalek110]

<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
  <polygon points="50,10 0,190 100,190" fill="lime" />
  <rect width="150" height="100" x="120" y="50" fill="blue" />
  <circle r="45" cx="350" cy="100" fill="red" />
  <text x="420" y="100" fill="red">I love SVG!</text>
</svg>

 

[saalek110]

<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
  <polygon points="50,10 0,190 100,190" fill="lime" fill-opacity="0.5" />
  <rect width="150" height="100" x="120" y="50" fill="blue" fill-opacity="50%" />
  <circle r="45" cx="350" cy="100" fill="red" fill-opacity="0.6" />
  <text x="420" y="100" fill="red" fill-opacity="70%">I love SVG!</text>
</svg>

 

[saalek110]

<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
  <polygon points="100,10 40,198 190,78 10,78 160,198" fill="lime" fill-rule="evenodd" />
</svg>

 

[saalek110]

<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
  <polygon points="100,10 40,198 190,78 10,78 160,198" fill="lime" fill-rule="nonzero" />
</svg>

 

[saalek110]

<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
  <polygon points="50,10 0,190 100,190" fill="lime" stroke="red" />
  <rect width="150" height="100" x="120" y="50" fill="yellow" stroke="red" />
  <circle r="45" cx="350" cy="100" fill="pink" stroke="blue" />
  <text x="420" y="100" fill="red" stroke="blue">I love SVG!</text>
</svg>

 

[saalek110]

<svg height="80" width="300" xmlns="http://www.w3.org/2000/svg">
  <g fill="none">
    <path stroke="red" d="M5 20 l215 0" />
    <path stroke="green" d="M5 40 l215 0" />
    <path stroke="blue" d="M5 60 l215 0" />
  </g>
</svg>

سه خط رنگی موازی افقی.

 

[saalek110]

<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
  <polygon points="55,10 10,190 110,190" fill="lime" stroke="red" stroke-width="4" />
  <rect width="150" height="100" x="120" y="50" fill="yellow" stroke="red" stroke-width="4" />
  <circle r="45" cx="350" cy="100" fill="pink" stroke="blue" stroke-width="4" />
  <text x="420" y="100" fill="red" stroke="blue" stroke-width="4">I love SVG!</text>
</svg>