SVGdefine gráficos basados en vectores en formato XML.
svgsignifica Scalable Vector Graphics.
¿Qué es SVG?
SVGsignifica gráficos vectoriales escalablesSVGse utiliza para definir gráficos para la webSVGes una recomendación de la W3C
El elemento svg
El elemento HTML <svg> es un contenedor para gráficos SVG.
SVG tiene varios métodos para dibujar rutas, cuadros, círculos, texto e imágenes gráficas.
Compatibilidad con los navegadores
Los números de la siguiente tabla especifican la primera versión del navegador que fue totalmente compatible con el elemento <svg>.
| Elemento | Chrome | Edge | Mozilla | Safari | Opera |
<svg> | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
Círculo svg
Ejemplo:
Rectángulo svg
Ejemplo:
Rectángulo redondeado svg
Ejemplo:
Estrella svg
Ejemplo:
Logo svg
Ejemplo:
Diferencias entre svg y canvas
SVG es un lenguaje para describir gráficos 2D en XML.
Canvas dibuja gráficos 2D sobre la marcha (con JavaScript).
SVG está basado en XML, lo que significa que todos los elementos están disponibles dentro del SVG DOM. Puedes adjuntar controladores de eventos de JavaScript para un elemento.
En SVG, cada forma dibujada se recuerda como un objeto. Si se cambian los atributos de un objeto SVG, el navegador puede volver a representar automáticamente la forma.
Canvas se representa píxel por píxel. En canvas, una vez que se dibuja el gráfico, el navegador lo olvida. Si se debe cambiar su posición, se debe volver a dibujar toda la escena, incluidos los objetos que podrían haber estado cubiertos por el gráfico.
Comparación svg y canvas
La siguiente tabla muestra algunas diferencias importantes entre svg y canvas:
| Canvas | SVG |
| • Dependiente de la resolución |
• No hay soporte para controladores de eventos
• Malas capacidades de representación de texto
• Puedes guardar la imagen resultante como .png o .jpg
• Muy adecuado para juegos con gráficos intensivos | • Dependiente de la resolución
• Compatibilidad con controladores de eventos
• Ideal para aplicaciones con grandes áreas de renderizado (Google Maps)
• Renderizado lento si es complejo (cualquier cosa que use mucho el DOM será lento)
• No adecuado para aplicaciones de juegos |
Resumen
SVG define gráficos basados en vectores en formato XML.
Traducido con 💚 desde W3Schools.com