HTML SVG
HTML5 prend en charge le SVG en ligne.
Qu'est-ce que SVG ?
SVG fait référence à des graphiques vectoriels évolutifs (Scalable Vector Graphics)
SVG est utilisé pour définir en fonction des graphiques vectoriels
SVG utilise le format XML pour définir les graphiques
Les images SVG ne perdront pas leur qualité graphique lorsqu'elles sont agrandies ou redimensionnées
. SVG est une norme du World Wide Web Consortium
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 évolutive
Les images SVG peuvent être imprimé en haute qualité à n'importe quelle résolution
SVG peut être agrandi sans perdre la qualité de l'image
Navigateur support
Internet Inline SVG est pris en charge dans Explorer 9+, Firefox, Opera , Chrome et Safari.
Intégrer SVG directement dans la page HTML
En HTML5, vous pouvez intégrer des éléments SVG directement dans des pages HTML :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</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>
Résultats d'exécution du programme :
Pour apprendre pour en savoir plus sur les didacticiels SVG, veuillez visiter les didacticiels SVG.
La différence entre SVG et Canvas
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.
Comparaison de Canvas et SVG
Le tableau suivant répertorie certaines des différences entre Canvas et SVG.
| Canvas | SVG |
依赖分辨率 | 不依赖分辨率 |
不支持事件处理器 | 支持事件处理器 |
弱的文本渲染能力 | 最适合带有大型渲染区域的应用程序（比如谷歌地图） |
Possibilité d'enregistrer l'image résultante au format .png ou .jpg 能够以 .png 或 .jpg 格式保存结果图像 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快） 最适合图像密集型的游戏， 其中的许多对象会被频繁 重绘 不适合游戏应用 | < p> Une complexité élevée ralentira le rendu (toute application qui abuse du DOM n'est pas rapide) | ||||
Idéal pour les jeux gourmands en graphiques, où de nombreux objets seront <🎜> révisés fréquemment. <🎜> | <🎜 > <🎜> Ne convient pas aux applications de jeux<🎜> |
