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 |
依賴分辨率 | 不依賴分辨率 |
不支持事件處理器 | 支持事件處理器 |
弱的文本渲染能力 | 最適合帶有大型渲染區(qū)域的應(yīng)用程序（比如谷歌地圖） |
Possibilité d'enregistrer l'image résultante au format .png ou .jpg 能夠以 .png 或 .jpg 格式保存結(jié)果圖像 復(fù)雜度高會減慢渲染速度（任何過度使用 DOM 的應(yīng)用都不快） 最適合圖像密集型的游戲， 其中的許多對象會被頻繁 重繪 不適合游戲應(yīng)用 | < 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 |
