HTML5 SVG | TIEngranaje

¡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>

Error 403 The request cannot be completed because you have exceeded your quota. : quotaExceeded

Deja un comentario