Latest web development tutorials

HTML5 en línea SVG

HTML5 soporta SVG en línea.

SVG Lo sentimos, su navegador no soporta SVG en línea.

¿Cuál es SVG?

  • SVG medios gráficos vectoriales escalables (Scalable Vector Graphics)
  • SVG para gráficos utiliza para definir la red basada en vector
  • SVG utiliza formato XML de definición de gráficos
  • Imagen SVG para agrandar o no se perderá el cambio en el tamaño de su calidad de imagen
  • SVG es un consorcio World Wide Web estándar

ventaja SVG

En comparación con otros formatos de imagen (como JPEG y GIF), utilizando SVG ventajas:

  • Las imágenes SVG pueden ser creados y modificados usando un editor de texto
  • Las imágenes SVG se pueden buscar, indexar, con guión o comprimidas
  • SVG es escalable
  • Las imágenes SVG se pueden imprimir en cualquier resolución de alta calidad
  • SVG puede ser exagerada en la calidad de la imagen no disminuye

Soporte para el navegador

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9 o superior, Firefox, Opera, Chrome, Safari y el apoyo SVG en línea.


El SVG incrustado directamente en la página HTML

En HTML5, usted será capaz de SVG elementos directamente en la página HTML:

Ejemplos

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

Trate »

resultados:

Lo sentimos, su navegador no soporta SVG en línea.

Más información sobre SVG tutorial, por favor visite SVG tutorial .


SVG y Canvas diferencia entre los dos

SVG es un gráfico 2D utilizando Descripción lenguaje XML.

Lienzo para dibujar gráficos en 2D utilizando JavaScript.

SVG basado en XML, lo que significa que cada elemento de la SVG DOM está disponible. Puede asociar controladores de eventos de JavaScript para un elemento.

En SVG, cada uno considerará que se dispone de objetos gráficos. Si los cambios de objeto SVG propiedad, el navegador puede reproducir automáticamente los gráficos.

La lona se hace pixel por pixel. En el lienzo, una vez que el gráfico se dibuja es completa, no va a seguir siendo la atención del navegador. Si se cambia la posición, a continuación, toda la escena también necesita ser redibujado, incluido cualquier objeto que pueda haber sido cubiertas con los gráficos.


La comparación de SVG y Canvas

La siguiente tabla muestra algunas de las diferencias entre el lienzo y SVG.

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