Practical use of SVG tag in HTML

Advertisemen

Some more on SVG tag in HTML5:
<mask>:

<svg width="200" height="80" viewBox="0 0 200 80">
        <defs>
            <mask id="myMask" maskUnits="userSpaceOnUse"
                  x="0" y="0" width="200" height="80">
              <rect x="0" y="0" width="100" height="80" fill="white"/>
            </mask>
        <text id="Text" x="100" y="48" font-size="26" 
                 font-weight="bold" text-anchor="middle">
                Black & White
    </text>
        </defs>
        <rect x="100" y="10" width="95" height="60" />
        <use href="#Text" fill="white"/>
        <use href="#Text" fill="black" mask="url(#myMask)"/>
    </svg>

 

<g> groups the other SVG tags :

<svg viewBox="0 0 95 50">
        <g stroke="green" fill="white" stroke-width="5">
            <circle cx="25" cy="25" r="15"/>
            <circle cx="40" cy="25" r="15"/>
            <circle cx="55" cy="25" r="15"/>
            <circle cx="70" cy="25" r="15"/>
        </g>
    </svg>

<mark> : The <marker> element defines the graphics that is to be used for drawing arrowheads or polymarkers on a given <path>, <line>, <polyline> or <polygon> element.

<svg width="120" height="120" viewBox="0 0 120 120">
        <defs>
            <marker id="Triangle" viewBox="0 0 10 10"
               refX="1" refY="5" markerWidth="6" markerHeight="6"
               orient="auto"> 
               <path d="M 0 0 L 10 5 L 0 10 z" />
            </marker>
        </defs>
        <polyline points="10,90 50,80 90,20" fill="none"
              stroke="black" stroke-width="2" 
              marker-end="url(#Triangle)" />
    </svg>

Advertisemen