communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

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

8.jpg


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 :

6.jpg

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<🎜>

<🎜><🎜><🎜>
Formation continue
||
<!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>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492411 joue