svg

I. Description

The <svg> element is used to define two dimensional vector graphics. The vector graphics which are defined may be applied to HTML elements using CSS .

Scalable vector graphics are not commonly used in web pages, but they can be useful in certain situations.

II. Examples

<!DOCTYPE html>
<html>
    <head>
        <title>SVG Example</title>
        <style>
            p#content {
                border: 1px solid black;
                clip-path: url(#mask);
                width: 250px;
            }
        </style>
    </head>
    <body>
        <h1>Scalable Vector Graphic example</h1>
        <p id="content">
            The contents of this paragraph will not be fully visible because
            of the SVG mask being applied to the content by the web browser.
            You may be able to view parts of the words, but nothing near the
            edge of the element will be visible to the user.
        </p>
        <svg height="1">
            <clipPath id="mask" clipPathUnits="objectBoundingBox">
                <circle cx="0.5" cy="0.5" r="0.5" id="round"/>
            </clipPath>
        </svg>
    </body>
</html>

This document was last updated: