SVG en HTML | Tutorial con ejemplos
World Wide Web Consortium (W3C) recomienda la tecnología SVG para dibujar gráficos en un sitio web. En html La etiqueta se usa como contenedor para gráficos SVG y, usando SVG, podemos dibujar rutas, círculos, rectángulos, etc. Este artículo lo guiará sobre cómo trabajar con las imágenes SVG y presentar una descripción detallada en los siguientes aspectos:
- Conceptos básicos de SVG
- Cómo dibujar la línea SVG en HTML
- Cómo dibujar círculo svg en html
- Cómo dibujar el rectángulo SVG en HTML
- Cómo dibujar rectángulo redondeado SVG en HTML
- Cómo dibujar SVG Polygon en HTML
- Cómo dibujar SVG Eclipse HTML
Entonces, comencemos!
Conceptos básicos de SVG
Los gráficos vectoriales escalables determinan los formatos de imagen/imagen vectoriales basados en XML para las tecnologías web. Los archivos SVG se pueden animar y podemos integrarlos con otros estándares W3C como DOM y XSL. SVG proporciona imágenes de alta calidad I.mi. Si alguien se acerca a una imagen SVG, la calidad de la imagen no se vería afectada.
Cómo dibujar la línea SVG en HTML
La etiqueta HTML se puede usar dentro del Etiqueta para dibujar una línea. El ejemplo a continuación le permitirá comprender cómo dibujar una línea SVG en HTML.
Ejemplo
La siguiente pieza de código dibuja una línea simple:
Aquí en el fragmento anterior, x1, y1 son los puntos de partida de la línea, y x2, y2 son los puntos finales de la línea. Mientras especificamos el color de la línea en el atributo de estilo:
La salida verifica que una línea de color azul se dibuja de acuerdo con las posiciones establecidas por sus atributos.
Cómo dibujar círculo svg en html
La etiqueta HTML se puede usar dentro del Etiqueta para dibujar un círculo.
Ejemplo
El fragmento dado a continuación le permitirá guiar para crear un círculo SVG:
Especificamos el valor del eje x y el eje y como 40 y 50 respectivamente junto con el radio de 30 píxeles. El siguiente será la salida:
La salida verifica que el círculo se dibuja en color azul y se llena de color gris.
Cómo dibujar el rectángulo SVG en HTML
La etiqueta se puede usar dentro de la etiqueta para dibujar un rectángulo.
Ejemplo
El siguiente fragmento de código establece el ancho, la altura del rectángulo SVG como 250, 100 respectivamente y el rectángulo se llenará con el color gris.
Especificamos el color del trazo y el ancho de trazo como azul, y 5 respectivamente. El siguiente será la salida:
Cómo dibujar rectángulo redondeado SVG en HTML
Tenemos que especificar los atributos rx, ry en la etiqueta para dibujar rectángulos de esquinas redondeadas SVG.
Ejemplo
Extendamos un poco el ejemplo anterior y establezcamos el valor de RX, RY como 10px para dibujar las esquinas redondeadas del rectángulo SVG:
El fragmento de código anterior muestra la siguiente salida:
Cómo dibujar SVG Polygon en HTML
HTML proporciona una etiqueta para dibujar una forma que tenga al menos 3 lados. Se puede usar un atributo llamado "puntos" para especificar el eje x y el eje y de todos los lados.
Ejemplo
Consideremos el siguiente fragmento de código para comprender cómo establecer el eje X y el eje y de una forma:
La etiqueta se puede usar para dibujar diferentes formas como una estrella SVG, o cualquier otra forma cerrada.
Cómo dibujar SVG Eclipse HTML
La etiqueta se usa para dibujar una forma de eclipse, es muy similar al círculo. El círculo SVG tiene un radio horizontal y vertical igual, pero en el eclipse, el radio horizontal y vertical es diferente entre sí.
Ejemplo
El fragmento dado a continuación demuestra cómo dibujar un eclipse en html donde rx = "150" es el radio horizontal y ry = "75" es el radio vertical del eclipse:
El fragmento de código anterior muestra el siguiente resultado:
El borde/trazo de color azul y la forma de eclipse llena de gris verificaron que la etiqueta funcionó correctamente.
Conclusión
Este artículo demostró cómo dibujar imágenes SVG básicas en HTML. Dentro de la etiqueta, se pueden utilizar varias etiquetas para dibujar diferentes imágenes SVG como,, y las etiquetas se pueden usar para dibujar las líneas SVG, los círculos, los rectángulos, los polígonos y la forma de eclipse, respectivamente,. Dentro de estas etiquetas, se pueden usar diferentes atributos como el accidente cerebrovascular y el ancho de accidente cerebrovascular para establecer el borde y el ancho de la forma respectivamente.