SVG en ligne HTML5

HTML5 Inline SVG

Qu'est-ce que SVG ?

SVG signifie Scalable Vector Graphics

SVG est utilisé pour définir des graphiques vectoriels pour le Web

SVG utilise des graphiques de définition au format XML

Les images SVG ne perdront pas leur qualité graphique lorsqu'elles sont agrandies ou modifiées en taille

SVG est un standard du World Wide Web Consortium

Avec SVG, nous pouvons réaliser de nombreuses opérations de dessin identique au type API Canvas, mais lors du dessin de texte sur un élément Canvas, les caractères y seront fixés en pixels. Le texte devient partie intégrante de l'image et son contenu ne peut être modifié que si la zone de dessin du canevas est redessinée. Pour cette raison, le texte sur Canvas ne peut pas être récupéré par les moteurs de recherche, mais le texte sur SVG peut être recherché. Par exemple, Google indexe le texte du contenu SVG sur le Web.

Avantages SVG

Par rapport à d'autres formats d'image (tels que JPEG et GIF), les avantages de l'utilisation de SVG sont :

Les images SVG peuvent être créées et modifiées avec un éditeur de texte

Les images SVG peuvent être recherchées, indexées, scriptées ou compressées

SVG est évolutif

Les images SVG peuvent être imprimées avec haute qualité à n'importe quelle résolution

SVG peut être agrandi sans perdre la qualité de l'image

Ajouter SVG à la page

Mode en ligne : utilisé comme les autres éléments dans HTML, sur la base duquel des applications interactives HTML, JavaScript et SVG peuvent être écrites.

<body>
    <svg width="200" height="200">
    </svg>
</body>

Méthode sortante : importez des fichiers SVG externes en HTML via l'élément <img> L'inconvénient est que vous ne pouvez pas écrire de scripts pour interagir avec les éléments SVG.

Formes simples

SVG contient des éléments de forme de base, tels que rectangle, cercle et ellipse. La taille et la position des éléments de forme sont définies en tant que propriétés. Les propriétés d'un rectangle sont la largeur et la hauteur. Les cercles ont un attribut r qui représente le rayon. Ils utilisent tous la syntaxe CSS pour exprimer la distance, les unités incluent donc px, point, em, etc.

Rectangle : x="50" y="20" signifie que le point de départ du rectangle est (50,20)

<body>
    <svg width="200" height="200">
        <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect>
    </svg>
</body>

Les objets de changement de dessin SVG sont effectués dans l'ordre dans lequel ils apparaissent le document objet. Si nous dessinons le cercle après avoir dessiné le rectangle, le cercle apparaîtra au-dessus du rectangle.

Ajouter un cercle :

<body>    
<svg width="200" height="200">        
<rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc">
</rect>        
<circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle> 
</svg>
</body>

Transformer l'élément SVG

En SVG, plusieurs éléments peuvent être combinés pour former un groupe et devenir un tout. L'élément

<g> représente un "groupe" et peut être utilisé pour combiner plusieurs éléments liés. Les membres du groupe peuvent être référencés par ID. De plus, le groupe peut également être transformé dans son ensemble. Si vous ajoutez un attribut de transformation à un groupe, tout le contenu du groupe sera transformé. Les propriétés de transformation incluent la rotation, la déformation, la mise à l'échelle et le biseautage.

 <svg width="200" height="200">
        <g transform="translate(60,0) rotate(30) scale(0.75)" id="ShapeGroup">
            <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect>
            <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle>
         </g>
    </svg>

Réutiliser le contenu

L'élément <defs> Vous pouvez utiliser l'élément <use> pour lier le contenu défini par <defs> à l'endroit où il doit être affiché. Avec ces deux éléments, vous pouvez réutiliser plusieurs fois le même contenu et éliminer la redondance.

<svg width="200" height="200">
        <defs>
            <g  id="ShapeGroup">
                <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect>
                <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle>
            </g>
        </defs>
        <use xlink:href="#ShapeGroup" transform="translate(60,0)  scale(0.4)"></use>
        <use xlink:href="#ShapeGroup" transform="translate(120,80)  scale(0.75)"></use>
        <use xlink:href="#ShapeGroup" transform="translate(20,60)  scale(0.25)"></use>
    </svg>

Motifs et dégradés

<svg>
<defs>
            <pattern id="GravelPattern" patternContentUnits="userSpaceOnUse"
                x="0" y="0" width="100" height="67" viewBox="0 0 100 67">
                <image x="0" y="0" width="100" height="67" xlink:href="gravel.jpg" />
            </pattern>
            <%--渐变--%>
            <linearGradient id="RedBlackGradient">
                <stop offset="0%" stop-color="#000"></stop>
                <stop offset="100%" stop-color="#f00"></stop>
            </linearGradient>
        </defs>
      <rect x="0" y="20" width="100" height="80" stroke="red"
           fill="url(#RedBlackGradient)" />
        <circle cx="120" cy="80" r="40" stroke="#00f"
            stroke-width="8" fill="url(#GravelPattern)" />
    </svg>

Chemin

<path> définir le chemin.

La balise <path>

La balise <path> est utilisée pour définir le chemin.

Les commandes suivantes peuvent être utilisées pour les données de chemin :

M = moveto

L = lineto

H = horizontal lineto

V = ligne verticale vers

C = courbe vers

S = courbe lisse vers

Q = courbe de Belzier quadratique

T = courbe de Belzier quadratique lisse

A = Arc elliptique

Z = closepath

Remarque : Toutes les commandes ci-dessus autorisent les lettres minuscules. Les majuscules signifient un positionnement absolu, les minuscules signifient un positionnement relatif.

SVG contient des formes simples ainsi que des chemins de forme libre. L'élément path a un attribut d, qui représente les données de chemin. Dans la valeur de d, M représente Déplacer vers, L représente Ligne vers, Q représente une courbe quadratique et Z représente un chemin fermé.

 <svg width="200" height="200">
        <path d="M25,50 L10,80 L20,80 L5,110,L15,110,L20,80 Z"  />
    </svg>

Texte

Le texte en SVG est quelque peu similaire à la définition du style en CSS

<svg width="200" height="200">
        <text x="10" y="80" font-family="Droid Sans" stroke="#00f" fill="#00f"
            font-size="40px" font-weight="bold">Hello SVG</text>
    </svg>

Les deux SVG et Canvas La différence entre

SVG est un langage qui utilise XML pour décrire les graphiques 2D.

Canvas utilise JavaScript pour dessiner des graphiques 2D.

SVG est basé sur XML, ce qui signifie que chaque élément du DOM SVG est disponible. Vous pouvez attacher un gestionnaire d'événements JavaScript à un élément.

En SVG, chaque forme dessinée est considérée comme un objet. Si les propriétés d'un objet SVG changent, le navigateur peut automatiquement reproduire le graphique.

Le canevas est rendu pixel par pixel. Dans Canvas, une fois qu'un graphique est dessiné, il n'attire plus l'attention du navigateur. Si sa position change, la scène entière doit être redessinée, y compris tous les objets qui auraient pu être recouverts par des graphiques.

Formation continue