Latest web development tutorials

HTML5 inline SVG

HTML5 supporte SVG en ligne.

SVG Désolé, votre navigateur ne supporte pas les SVG en ligne.

Qu'est-ce que SVG?

  • SVG moyens Scalable Vector graphiques (Scalable Vector Graphics)
  • SVG pour les graphiques utilisés pour définir le réseau vectoriel
  • SVG utilise format XML définition graphiques
  • l'image SVG pour agrandir ou changement dans la taille de sa qualité d'image ne sera pas perdu
  • SVG est un Wide Web Consortium norme mondiale

SVG avantage

Comparé à d'autres formats d'image (tels que JPEG et GIF), en utilisant les avantages de SVG:

  • Les images SVG peuvent être créés et modifiés à l'aide d'un éditeur de texte
  • Les images SVG peuvent être recherchés, indexés, scriptés ou compressées
  • SVG est évolutive
  • Les images SVG peuvent être imprimés dans une résolution de haute qualité
  • SVG peut être exagérée dans la qualité de l'image ne diminue pas

support du navigateur

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9+, Firefox, Opera, Chrome et Safari support inline SVG.


Le SVG intégré directement dans la page HTML

En HTML5, vous serez en mesure de SVG éléments directement dans la page HTML:

Exemples

<!DOCTYPE html>
<html>
<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>

Essayez »

Résultats:

Désolé, votre navigateur ne supporte pas les SVG en ligne.

En savoir plus sur SVG tutoriel, s'il vous plaît visitez SVG tutoriel .


SVG et Canvas différence entre les deux

SVG est un graphisme 2D en utilisant la description XML langue.

Toile pour dessiner des graphiques 2D en utilisant JavaScript.

SVG basé sur XML, ce qui signifie que chaque élément dans le DOM SVG est disponible. Vous pouvez joindre gestionnaires d'événements JavaScript pour un élément.

En SVG, chacun réputé tirer des objets graphiques. Si les objets changements propriété SVG, le navigateur peut automatiquement reproduire les graphiques.

Canvas est rendu pixel par pixel. Dans la toile, une fois que le graphique est dessiné est terminée, il ne sera pas continuer à être l'attention du navigateur. Si la position est modifié, toute la scène doit également être redessiné, y compris les objets qui ont pu être couverts avec des graphiques.


Comparaison des SVG et Canvas

Le tableau ci-dessous présente quelques-unes des différences entre la toile et SVG.

Canvas SVG
  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏,其中的许多对象会被频繁重绘
  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序(比如谷歌地图)
  • 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
  • 不适合游戏应用