English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML5 Supporte l'inline SVG. Les fichiers SVG peuvent être intégrés dans un document HTML à l'aide des balises suivantes : <embed>, <object> ou <iframe> (embed et iframe appartiennent tous deux aux frames intégrées), à travers ces balises, le code SVG peut être intégré directement dans une page HTML, ou nous pouvons également lier directement aux fichiers SVG.
SVG signifie Scalable Vector Graphics (Graphiques Vectoriels Extensibles)
SVG est utilisé pour définir des graphiques vectoriels basés sur le réseau
SVG utilise le format XML pour définir les graphiques
Les images SVG conservent leur qualité graphique même lorsqu'elles sont agrandies ou redimensionnées
SVG est un standard du World Wide Web Consortium
Comparé aux autres formats d'images (comme JPEG et GIF), les avantages de l'utilisation de SVG sont les suivants :
Les images SVG peuvent être créées et modifiées à l'aide d'un éditeur de texte
Les images SVG peuvent être recherchées, indexées, scriptées ou compressées
Les SVG sont extensibles
Les images SVG peuvent être imprimées en haute qualité à n'importe quelle résolution
Les images SVG peuvent être agrandies sans perte de qualité d'image
Internet Explorer 9+, Firefox, Opera, Chrome, et Safari supportent l'inline SVG。
在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>基础教程网(oldtoolbag.com)</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> </svg> </body> </html>Testez et voyez ‹/›
Les résultats après l'exécution sont les suivants :
!doctype html> <html> <head> <meta charset="utf-8"> <title>Using SVG to draw a circle oldtoolbag.com</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" height="500px" width="500px" version="1.1"> <circle cx="200" cy="100" r="100" stroke="#afeedd" stroke-width="5" fill="#f0ddff" /> </svg> </body> </html>Testez et voyez ‹/›
Dans la balise <svg>heightetwidthLa propriété est pour définir la hauteur et la largeur du document SVG ;versionLa propriété peut définir la version de SVG utilisée ;xmlns La propriété peut définir l'espace de nommage SVG ;
<circle> est une balise utilisée dans SVG pour créer des cercles,cx et cy La propriété définit le centre de la x et y Les coordonnées, si ces deux propriétés sont ignorées, le point sera placé à (0, 0),rLa propriété définit le rayon du cercle ;
stroke et stroke-width La propriété contrôle la manière dont le contour de la forme est affiché ;fill Définir la couleur de la forme à l'intérieur des propriétés ;
Voici une illustration de la démonstration :
!doctype html> <html> <head> <meta charset="utf-8"> <title>Using SVG to draw a rectangle oldtoolbag.com</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" version="1.1"> <rect x="50" y="100" width="300" height="150" style="fill:rgb(145,245,255);stroke-width:5;stroke:#EE799F;fill-opacity:0.9;stroke-opacity:0.9;"/> </svg> </body> </html>Testez et voyez ‹/›
SVG est une forme d'utilisation de XML pour décrire 2Langage des graphiques D.
Canvas est dessiné via JavaScript 2Graphique D.
SVG est basé sur XML, ce qui signifie que chaque élément du DOM SVG est disponible. Vous pouvez attacher un gestionnaire d'événement JavaScript à un élément.
Dans SVG, chaque forme dessinée est considérée comme un objet. Si les attributs d'un objet SVG changent, le navigateur peut automatiquement redessiner la forme.
Canvas est rendu pixel par pixel. Une fois qu'un graphique a été dessiné sur le canvas, il ne reçoit plus l'attention du navigateur. Si sa position change, l'ensemble de la scène doit être redessiné, y compris tout objet peut-être couvert par le graphique.
Le tableau suivant liste quelques différences entre Canvas et SVG.
| Canvas | SVG |
|
|