Introducción a HTML SVG
El uso de imágenes en HTML es increíble para sitios web ricos en multimedia. Todo lo que tiene que hacer es agregar una etiqueta al código HTML y viola, su navegador mostrará e incluso agregará un enlace a la imagen que elija. Se vuelve un poco problemático en situaciones en las que sabe que la imagen o el diagrama se ampliarán porque un JPG.webp o PNG no mostrará más detalles una vez que se amplíe más allá de su resolución. SVG es la solución a este problema. SVG significa Gráficos Vectoriales Escalables. Como su nombre lo indica, se pueden ampliar tanto como sea necesario y los detalles nunca desaparecen. Los SVG no son exclusivos de la tecnología web, pero poder usarlos en HTML es realmente genial.
SVG es útil para diagramas, vectores, cuadros y gráficos en el navegador. Aprendamos cómo puede usarlos en detalle aquí.
Sintaxis de incrustar SVG en HTML
De manera similar al uso del lienzo en HTML5, hay una etiqueta simple que puede usar para incrustar SVG en páginas HTML5. La sintaxis es la siguiente:
…. …. …. ….
Ejemplos de SVG en HTML
Ahora, echemos un vistazo a algunos vectores de ejemplo que se pueden crear e incrustar en HTML5:
Ejemplo # 1 - Dibujar un rectángulo a través de SVG en HTML
Código:
Sorry but this browser does not support inline SVG.
Salida:
Ejemplo # 2 - Dibujando un cuadrado con esquinas redondeadas en SVG
Para un cuadrado con esquinas redondeadas, tendremos que definir el radio de las esquinas con el uso de rx, aparte del tamaño y las dimensiones del cuadrado.
Código:
Sorry but this browser does not support inline SVG.
Salida:
Ejemplo # 3 - Dibujar un círculo en SVG con el contorno y la presentación de color dentro de él
Código:
Sorry but this browser does not support inline SVG.
Salida:
Ejemplo # 4 - Dibujando una línea recta con SVG en HTML5
Podemos usar la etiqueta para dibujar una línea recta en HTML5 SVG, también se puede definir el color, el grosor de la línea y la posición de la misma.
Código:
Salida:
Ejemplo # 5 - Dibujar un eclipse a través de SVG en HTML5
Podemos usar la etiqueta para dibujar un eclipse en SVG HTML5, el color y la posición de la misma pueden definirse junto con su radio.
Código:
Sorry but this browser does not support inline SVG.
Salida:
Ejemplo # 6 - Creando un polígono con SVG en HTML5
La etiqueta se puede usar en SVG para crear polígonos. En la etiqueta, debemos mencionar las posiciones de cada punto. Los colores de relleno, el grosor del contorno, etc. también se pueden definir en el código.
Código:
Sorry but this browser does not support inline SVG.
Salida:
Ejemplo # 7 - Crear una polilínea con SVG en HTML5
La polilínea se usa para dibujar una forma que solo consistirá en una línea recta. Tenga en cuenta que estas líneas también deben estar conectadas. Aquí hay un ejemplo de una implementación de polilínea en HTML5.
Código:
Sorry but this browser does not support inline SVG.
Salida:
Ejemplo # 8 - Dibujar texto con SVG en HTML5
El texto podría ser necesario en cualquier SVG en muchas situaciones, como etiquetar un gráfico, etc. Afortunadamente, existe una etiqueta en SVG que se puede usar. El texto se puede establecer en cualquier posición en el SVG y también puede personalizar su color y otros detalles.
Código:
Here is an example, it's very examply
Sorry but this browser does not support inline SVG.
Salida:
Ejemplo # 9 - Dibujando una estrella con SVG en HTML5
Ahora que hemos terminado con lo básico, creemos una estrella que se creará con la ayuda de SVG.
Código:
style="fill:orange; stroke:green; stroke-width:5; fill-rule:evenodd;" />
Sorry but this browser does not support inline SVG.
style="fill:orange; stroke:green; stroke-width:5; fill-rule:evenodd;" />
Sorry but this browser does not support inline SVG.
Salida:
Ejemplo # 10 - Usando degradado lineal en SVG
Puede usar Gradiente lineal y radial en SVG mucha línea HTML Canvas. El gradiente tiene que estar anidado en la etiqueta. Esta etiqueta se marca en la etiqueta SVG para indicar su uso. Echemos un vistazo a un ejemplo que usa Gradient en un eclipse.
Código:
Sorry but this browser does not support inline SVG.
Salida:
Conclusión
En el caso de sitios donde se van a utilizar diagramas y gráficos, los SVG son un salvavidas. La mayoría de los navegadores web modernos también admiten SVG y, además de ser escalables. Otro beneficio de usar SVG es su tamaño de archivo. Debido a que es solo un poco de código, los SVG pueden tener una huella muy pequeña en la memoria y el ancho de banda consumido en comparación con las imágenes tradicionales.
Artículos recomendados
Esta es una guía de HTML SVG. Aquí discutimos la introducción y los 10 ejemplos principales de HTML SVG con explicación e implementación de código. También puede consultar los siguientes artículos para obtener más información:
- Html5 Nuevos Elementos
- SVG vs EPS
- Bloques HTML
- Marcos HTML