Code icon

CSS - SVG

Links


    // SVG
    <img src="kiwi.svg" alt="Kiwi standing on oval">

    background: url(kiwi.svg); /*As Background*/

    body {
        background: url(fallback.png);
        background-image: url(image.svg), none;
      }

    <svg ...>
    <ellipse class="ground" .../>
    <path class="kiwi" .../>
    </svg>
    .kiwi {
    fill: #94d31b; 
    }
    .kiwi:hover {
    fill: #ace63c; 
    }

    php echo file_get_contents("kiwi.svg");



    // EXAMPLES
    <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>

    <svg width="300" height="200">
    <polygon points="100,10 40,198 190,78 10,78 160,198"
    style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
    </svg>


    <svg height="130" width="500">
    <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
        <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
        </linearGradient>
    </defs>
    <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
    <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
    Sorry, your browser does not support inline SVG.
    </svg>
SVG