SVG: Scalable Vector Graphics (SVG) es un formato de imagen basado en XML que se utiliza para definir gráficos vectoriales bidimensionales para la web. A diferencia de la imagen de trama (por ejemplo, .jpg, .gif, .png, etc.), una imagen vectorial se puede escalar hacia arriba o hacia abajo en cualquier medida sin perder la calidad de la imagen.
Una imagen SVG se dibuja utilizando una serie de declaraciones que siguen el esquema XML, lo que significa que las imágenes SVG se pueden crear y editar con cualquier editor de texto, como el Bloc de notas. Hay varias otras ventajas de usar SVG sobre otros formatos de imagen como JPEG, GIF, PNG, etc.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
<title>HTML5 SVG</title>
</head>
<body>
<h2 align="center">
SVG Circle(Geeks For Geeks)
</h2>
<svg id="svgelem" height="200">
<circle id="greencircle" cx="60"
cy="60" r="50" fill="green" />
</svg>
</body>
</html>
Producción:
Canvas: el elemento HTML se utiliza para dibujar gráficos sobre la marcha, a través de secuencias de comandos (generalmente JavaScript). El elemento es solo un contenedor de gráficos. Debe usar un script para dibujar los gráficos. Canvas tiene varios métodos para dibujar rutas, cuadros, círculos, texto y agregar imágenes.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Tag</title>
</head>
<body>
<h2>Canvas Square(Geeks For Geeks)</h2>
<canvas id="newCanvas" width="100" height="100"
style="border:1px solid #000000;">
</canvas>
<script>
var c = document.getElementById('newCanvas');
var ctx = c.getContext('2d');
ctx.fillStyle = '#7cce2b';
ctx.fillRect(0, 0, 100, 100);
</script>
</body>
</html>
Producción:
Diferencia entre SVG y HTML5 Canvas:
| SVG | Lienzo |
|---|---|
| Basado en vectores (compuesto de formas) | Basado en ráster (compuesto por píxeles) |
| SVG tiene mejor escalabilidad. Por lo tanto, se puede imprimir con alta calidad en cualquier resolución. | Canvas tiene poca escalabilidad. Por lo tanto, no es adecuado para imprimir en una resolución más alta. |
| SVG ofrece un mejor rendimiento con una menor cantidad de objetos o una superficie más grande. | Canvas ofrece un mejor rendimiento con una superficie más pequeña o una mayor cantidad de objetos. |
| SVG se puede modificar mediante script y CSS. | El lienzo solo se puede modificar a través de un script. |
| Múltiples elementos gráficos, que se convierten en parte del árbol DOM de la página. | Elemento único similar a <img> en comportamiento. El diagrama de lienzo se puede guardar en formato PNG o JPG. |
Publicación traducida automáticamente
Artículo escrito por joshikashyap399 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA