¡Bienvenidos al increíble universo de HTML5 SVG y los engranajes! Si eres un amante del diseño web o, simplemente, te gusta conocer las últimas herramientas y tecnologías, entonces este artículo es para ti. En esta ocasión, te presentamos una de las características más interesantes de HTML5 SVG: la oportunidad de crear vibrantes y precisos gráficos vectoriales ¡con temas de engranajes! ¿Te animas a conocer más sobre esta fascinante herramienta? ¡Sigue leyendo!
Gráficos vectoriales escalables (SVG) forman parte de la familia de gráficos basados en vectores. Son bastante diferentes de los gráficos basados en tramas con los que puede estar acostumbrado a trabajar. Los formatos basados en ráster más comunes que se usan en la web hoy en día son JPEG, GIF y PNG. SVG tiene varias ventajas sobre los formatos basados en ráster.
Por ejemplo, los gráficos SVG se crean utilizando fórmulas matemáticas. Esto requiere mucho menos datos para ser procesado ya que no tiene que almacenar datos para cada píxel individual. Además, las imágenes vectoriales escalan mucho mejor. La distorsión de una imagen puede ocurrir al escalar gráficos basados en tramas. imágenes SVG también se pueden cambiar dinámicamente, lo que los hace especialmente adecuados para aplicaciones basadas en datos, como gráficos.
Soporte para SVG
La mayoría de los navegadores web que se utilizan hoy en día admiten la visualización de imágenes SVG. Internet Explorer 9, Firefox, Opera, Chrome y Safari son compatibles con SVG. Para Internet Explorer anterior a la versión 9es posible que los usuarios tengan que instalar Adobe SVG Viewer para poder ver SVG en el navegador.
SVG viewBox
El viewBox SVG se utiliza al crear formas SVG. El cuadro de vista es parte del lienzo que desea que vea el espectador. No confundir el ancho y el alto del cuadro de vista con el ancho y el alto que estableció para el documento SVG.
El ancho y alto del elemento SVG establece el tamaño del lienzo de dibujo. Los atributos viewBox usan cuatro parámetros: comienzo x coordinar, comenzando coordinar, ancho del cuadro de vista, y altura del cuadro de vista.
Formas básicas
Las imágenes SVG generalmente se crean utilizando un lenguaje basado en XML. En HTML5, puede incrustar elementos SVG directamente en su página HTML. En este tutorial, mostraremos HTML de algunas formas básicas utilizando SVG y otros elementos relacionados.
Círculo
El <circle>
El elemento define un círculo basado en un punto central y un radio.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="250" viewBox="0 0 500 250">
<circle cx="250" cy="125" r="100" stroke="#7F7F7F" stroke-width="3" fill="#FFAA00" />
</svg>
Atributo | Descripción |
---|---|
cx |
coordenada x del centro del circulo |
cy |
coordenada y del centro de la circunferencia |
r |
radio del circulo |
fill |
El color que llenará el interior de la forma. |
stroke |
El color que se usará para delinear la forma. |
stroke-width |
El grosor del contorno. |
Elipse
El <ellipse>
elemento no es más que un círculo que se define con dos radios.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="250" viewBox="0 0 500 250">
<ellipse cx="250" cy="125" rx="100" ry="50" stroke="#7F7F7F" stroke-width="3" fill="#FFAA00" />
</svg>
Atributo | Descripción |
---|---|
cx |
coordenada x del centro de la elipse |
cy |
coordenada y del centro de la elipse |
rx |
radio del eje x de la elipse |
ry |
radio del eje y de la elipse |
fill |
El color que llenará el interior de la forma. |
stroke |
El color que se usará para delinear la forma. |
stroke-width |
El grosor del contorno. |
Rectángulo
El <rect>
El elemento define un rectángulo que está alineado con el eje con el sistema de coordenadas del usuario actual. Los rectángulos redondeados se pueden lograr estableciendo valores apropiados para los atributos rx
y ry
.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="250" viewBox="0 0 500 250">
<rect x="20" y="20" rx="10" ry="10" width="450" height="225" stroke="#7F7F7F" stroke-width="3" fill="#FFAA00" />
</svg>
Atributo | Descripción |
---|---|
x |
coordenada x de la esquina del rectángulo |
y |
coordenada y de la esquina del rectángulo |
rx |
radio del eje x de la elipse utilizada para redondear las esquinas del rectángulo |
ry |
radio del eje y de la elipse utilizada para redondear las esquinas del rectángulo |
width |
Ancho del rectángulo |
height |
Altura del rectángulo |
fill |
El color que llenará el interior de la forma. |
stroke |
El color que se usará para delinear la forma. |
stroke-width |
El grosor del contorno. |
Línea
El <line>
elemento define un segmento de línea que comienza en un punto y termina en otro.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="250" viewBox="0 0 500 250">
<line x1="0" y1="0" x2="500" y2="250" stroke="#FFAA00" stroke-width="5" />
</svg>
Atributo | Descripción |
---|---|
x1 |
coordenada x inicial |
y1 |
mirando y coordenada |
x2 |
coordenada x final |
y2 |
terminando la coordenada y |
stroke |
El color que se usará para delinear la forma. |
stroke-width |
El grosor del contorno. |
Polilínea
El <polyline>
elemento le permite crear un dibujo de múltiples definiciones de línea.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="250" viewBox="0 0 500 250">
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160 160,160 160,200" fill="transparent" stroke="#FFAA00" stroke-width="3" />
</svg>
Atributo | Descripción |
---|---|
x ,y x ,y |
Coordenadas utilizadas para crear la ruta entre dos puntos |
fill |
El color que llenará el interior de la forma. |
stroke |
El color que se usará para delinear la forma. |
stroke-width |
El grosor del contorno. |
Polígono
El <polygon>
El elemento define una forma cerrada que consta de un conjunto de segmentos de línea recta conectados.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="250" viewBox="0 0 750 375">
<polygon points="350,75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161" fill="#FFAA00" stroke="#7F7F7F" stroke-width="3" />
</svg>
Atributo | Descripción |
---|---|
x ,y x ,y |
Coordenadas utilizadas para crear la ruta entre dos puntos |
fill |
El color que llenará el interior de la forma. |
stroke |
El color que se usará para delinear la forma. |
stroke-width |
El grosor del contorno. |
Ejemplo
El siguiente ejemplo de código dibujará varias líneas para formar una imagen interesante. Podemos usar el <g>
elemento para agrupar <line>
elementos.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="250" height="250" viewBox="0 0 250 250">
<g stroke="#7F7F7F" stroke-width="1">
<line x1="0" y1="0" x2="0" y2="250" />
<line x1="0" y1="250" x2="250" y2="250" />
<line x1="0" y1="10" x2="10" y2="250" />
<line x1="0" y1="20" x2="20" y2="250" />
<line x1="0" y1="30" x2="30" y2="250" />
<line x1="0" y1="40" x2="40" y2="250" />
<line x1="0" y1="50" x2="50" y2="250" />
<line x1="0" y1="60" x2="60" y2="250" />
<line x1="0" y1="70" x2="70" y2="250" />
<line x1="0" y1="80" x2="80" y2="250" />
<line x1="0" y1="90" x2="90" y2="250" />
<line x1="0" y1="100" x2="100" y2="250" />
<line x1="0" y1="110" x2="110" y2="250" />
<line x1="0" y1="120" x2="120" y2="250" />
<line x1="0" y1="130" x2="130" y2="250" />
<line x1="0" y1="140" x2="140" y2="250" />
<line x1="0" y1="150" x2="150" y2="250" />
<line x1="0" y1="160" x2="160" y2="250" />
<line x1="0" y1="170" x2="170" y2="250" />
<line x1="0" y1="180" x2="180" y2="250" />
<line x1="0" y1="190" x2="190" y2="250" />
<line x1="0" y1="200" x2="200" y2="250" />
<line x1="0" y1="210" x2="210" y2="250" />
<line x1="0" y1="220" x2="220" y2="250" />
<line x1="0" y1="230" x2="230" y2="250" />
<line x1="0" y1="240" x2="240" y2="250" />
</g>
</svg>