Una mirada a los gráficos vectoriales escalables (SVG)
Los gráficos vectoriales se han aplicado ampliamente en medios impresos. En un sitio web, también podemos agregar gráficos vectoriales con SVG o Gráfico vectorial escalable. Citando de la especificación oficial en W3.org, SVG se describe como:
Un lenguaje para describir gráficos bidimensionales en XML. SVG permite tres tipos de objetos ßgráficos: formas de gráficos vectoriales (por ejemplo, rutas que consisten en líneas rectas y curvas), imágenes y texto.
En realidad, existe desde 1999 y, a partir del 16 de agosto de 2011, se convirtió en una Recomendación del W3C. Sin embargo, SVG todavía está muy poco utilizado, mientras que hay muchas ventajas en el uso de Vector en lugar de Bitmap para servir gráficos o imágenes en un sitio web..
Ventajas de SVG
En términos de servicio de gráficos en sitios web, SVG ofrece algunas ventajas sobre Bitmap, algunas de las cuales incluyen:
Resolución Independiente
El mapa de bits / gráfico ráster depende de la resolución, se basa en píxeles. Los gráficos servidos se verán pixelados cuando se redimensione a un cierto nivel de zoom. Eso no sucede con el gráfico vectorial, que es de resolución independiente en la naturaleza, ya que el gráfico se expresa con una ecuación matemática que lo hace Escalable a cualquier nivel de zoom manteniendo la calidad., incluso en Retina Display.
Reduciendo la solicitud HTTP
SVG se puede incrustar directamente en un documento HTML con svg etiqueta, por lo que el navegador no necesita hacer una solicitud para servir el gráfico. Esto también resulta en un mejor rendimiento de carga para el sitio web.
Estilismo y Scripting
Incrustar directamente con svg La etiqueta también nos permitirá diseñar el gráfico fácilmente a través de CSS. Podemos cambiar las propiedades del objeto como el color de fondo, la opacidad, los bordes, etc. de la misma manera que lo hacemos con la etiqueta HTML normal. Del mismo modo, también podemos manipular el gráfico a través de JavaScript..
Puede ser animado y editado
El objeto SVG se puede animar cuando usa el elemento de animación o mediante la biblioteca de JavaScript como jQuery. El objeto SVG también se puede editar con cualquier editor de código de texto o un software gráfico como Inkscape (que es gratuito) o Adobe Illustrator.
Tamaño de archivo más pequeño
SVG tiene un tamaño de archivo más pequeño en comparación con Bitmap, que tiene una presentación gráfica similar.
Dibujando formas básicas con SVG
De acuerdo con la especificación, podemos dibujar algunas formas básicas como la rectángulo, círculo, línea, elipse, polilínea y polígono con SVG y para que el navegador genere el gráfico SVG, todos esos elementos gráficos deben insertarse dentro de la etiqueta. Veamos los ejemplos a continuación para más detalles:
Línea
Dibujar una linea en SVG podemos usar el
Como puede ver arriba, la coordenada del punto de inicio de línea se expresa con los dos primeros atributos x1 y x2, mientras que la coordenada del punto final de la línea se expresa con y1 y y2.
También hay otros dos atributos, el carrera y anchura del trazo que se utilizan para definir el color del borde y el ancho del borde, respectivamente. Alternativamente, también podemos definir estos atributos dentro de un estilo en línea, así:
eventualmente hace lo mismo.
- Ver demostración “Línea”
Polilínea
Es casi similar a la
puntos Atributos que almacenan todas las coordenadas que forman las líneas..
- Ver demostración “Polilínea”
Rectángulo
Dibujar un rectángulo también es simple con esto.
- Ver demostración “Rectángulo”
Circulo
También podemos dibujar un círculo con la 100 radio que se define con r atributo:
Los dos primeros atributos., cx y cy Están definiendo la coordenada central del círculo. En el ejemplo anterior, hemos establecido 102 tanto para el X y y coordenada, si estos atributos no están especificados, 0 se tomará como el valor predeterminado.
- Ver demostración “Circulo”
Elipse
Podemos dibujar una elipse con X radio de línea y y radio de linea con rx y ry atributo;
- Ver demostración “Elipse”
Polígono
Con el
- Ver demostración “Polígono”
Usando el editor de gráficos vectoriales
Como puede ver, dibujar objetos simples con SVG en HTML es bastante fácil. Sin embargo, cuando el objeto se vuelve más complejo, esa práctica ya no es ideal y le dará un dolor de cabeza..
Afortunadamente, como hemos mencionado anteriormente, podemos usar un editor de gráficos vectoriales como Ilustrador Adobe o Inkscape para hacer el trabajo. Si está familiarizado con este software, seguramente es mucho más fácil dibujar objetos con su GUI en lugar de codificar el gráfico usted mismo en la etiqueta HTML..
Si estás trabajando con Inkscape., puede guardar su gráfico vectorial como SVG sin formato y luego abrirlo en el editor de código de texto. Ahora, deberías encontrar los códigos SVG en el archivo. Copia todos los códigos y pégalos dentro de tu documento HTML.
O bien, también puede insertar el .svg archivo a través de uno de estos elementos; empotrar, iframe y objeto, por ejemplo;
Los resultados serán eventualmente los mismos..
En este ejemplo, uso este iPod de Apple de OpenClipArt.org.
- Ver demostración “iPod”
Soporte del navegador
Con respecto al soporte del navegador, SVG ha sido muy bien soportado en todos los navegadores principales, excepto en IE8 y versiones anteriores. Pero este asunto se puede resolver con esta biblioteca de JavaScript, llamada Raphael.js. Para hacer las cosas más fáciles, utilizaremos esta herramienta, ReadySetRaphael.com para convertir nuestro código SVG en un formato compatible con Raphael. Así es cómo.
En primer lugar, descargue e incluya el Raphael.js biblioteca a su documento HTML. Luego, suba el .svg archivo al sitio, copie y pegue el código generado dentro de la siguiente carga función;
window.onload = function () // el código de Raphael va aquí
Dentro de cuerpo etiqueta, pon lo siguiente div con rsr atributo de identificación;
Eso es todo, ya está hecho. Mira el ejemplo del enlace de abajo.
- Ver demostración “Rafael”
Pensamientos finales
Así que eso es lo básico con SVG. Esperamos que ahora tengas una comprensión justa de este tema. Es la mejor manera de optimizar su sitio para cualquier resolución de pantalla, incluso para usar en la pantalla Retina.
Como siempre, si usted es una persona aventurera, aquí presentamos algunas referencias y discusiones más para profundizar en este tema..
- Una introducción a SVG - W3 Schools
- Resolución independiente con SVG - Smashing Magazine
- ¿Por qué no estás usando SVG? - NetTuts
Gracias por leer y esperamos que hayan disfrutado este post..
- Ver demostración
- Descargar fuente
