Share
SVG, o gráficas vectoriales escalables, es un motor de renderizado de gráficos vectoriales impulsado por marcado de estilo XML para el navegador. SVG es compatible con todos los navegadores, excepto IE < v9 and Android < v3. The same support is available for canvas (except canvas goes all the way back on Android), so the question often surfaces: which one should you use?
Hoy, encuestaremos a SVG y explicaremos por qué la pregunta "¿cuál debería usar?" Generalmente se responde por "¿Qué estoy tratando de hacer?". Para obtener una lista completa de los elementos que conforman SVG, consulte los documentos de Mozilla sobre el tema. Puedes ver la API SVG DOM allí también.
Comenzaremos por describir algunas ventajas únicas de SVG. Luego, en lugar de revisar los 80 tipos de nodos SVG, explicaremos cómo Illustrator puede obtener rápidamente un documento SVG en una página web. También echaremos un vistazo a D3.js, una potente biblioteca de JavaScript para manipulación de SVG..
"SVG no está destinado a ser utilizado para la manipulación de píxeles."
SVG tiene bastantes ventajas sobre imágenes o representaciones basadas en lienzos para ciertas aplicaciones. SVG no está destinado a ser utilizado para la manipulación de píxeles; sin embargo, maneja muy bien los gráficos vectoriales y la manipulación programática de vectores..
En caso de que no haya escuchado, la independencia de la resolución y el agnosticismo del navegador es un tema candente en el desarrollo de aplicaciones frontales (piense en "diseño responsivo") en estos días. La mayoría de las soluciones que existen para solucionar problemas basados en la resolución (por ejemplo, para pantallas de retina) involucran una gran cantidad de datos innecesarios descargados (reemplazo de imagen de alta resolución) o compromiso para un navegador o el otro (hasta todas las resoluciones, incluso cuando la pantalla no muestra la diferencia). Esto nos hace confiar en la velocidad del cuello de botella de la velocidad de descarga de datos para llevar imágenes de mayor resolución a dispositivos que a menudo están en redes de datos inalámbricas. No es ideal.
"SVG ofrece una manera de hacer elementos gráficos de resolución completa, sin importar el tamaño de la pantalla, el nivel de zoom o la resolución que tenga el dispositivo de su usuario".
SVG ofrece una manera de hacer elementos gráficos de resolución completa, sin importar el tamaño de la pantalla, el nivel de zoom o la resolución que tenga el dispositivo de su usuario. Esto es algo que hasta SVG, solo vimos con un estilo de elementos inteligente a través de CSS y la representación de texto. El uso de divs y: after elements para crear formas simples y otros efectos no es necesario con SVG. En su lugar, puedes crear formas vectoriales de todo tipo..
¿Entonces escribes HTML? JavaScript? CSS? Bueno. Entonces ya sabes mucho de lo que necesitas saber para escribir SVG. SVG realmente utiliza un formato compatible con XML para definir sus formas de representación. Más allá de esto, puedes realmente diseñar estilos en CSS y hacerlos interactivos con JavaScript. Existen múltiples bibliotecas JS para asistirlo en este mundo, como D3.js y Raphael. Aquí hay un ejemplo de un grupo de elementos SVG (la hoja Envato). También puedes ver este ejemplo en JSFiddle..
La API de SVG basada en nodos DOM ya es más accesible que la API de lienzo solo del lado del cliente. Con esta construcción podrás:
La API DOM proporciona un conjunto adicional de ventajas claras para el uso de SVG.
Cuando usa imágenes en un documento html con el
A pesar de las guerras de los navegadores, la API DOM, en todos los navegadores, ofrece una gran cantidad de flexibilidad en términos de interactividad de scripts, que se extiende a los elementos SVG. Styling SVG pasa a través de CSS. Tener las API de eventos del navegador disponibles para los elementos SVG hace que el comportamiento de las secuencias de comandos interactivas sea muy fácil. Simplemente adjunte un controlador a un nodo específico del elemento SVG, y estará listo.
Esto no es cierto para los elementos dibujados en el lienzo. Dado que el lienzo es simplemente un motor de representación de píxeles, los elementos dibujados no se guardan en la memoria como objetos. La secuencia de comandos tendría el trabajo de mantener estos elementos recopilados y monitorear toda la información relevante de posición y tamaño para buscar y desencadenar eventos en un ciclo de eventos. Más allá de esto, la indexación z tendría que ser manejada por el script también.
Echemos un vistazo a un ejemplo. Digamos que quieres detectar el desplazamiento sobre un círculo en el lienzo. Nota: solo diremos que el lienzo es el ancho completo de la ventana del navegador, y usaremos jQuery solo para mantener el ejemplo conciso.
Accentsconagua
var circleCenter = [200, 300], radio = 50; $ (ventana) .on ("mousemove", función (e) var mx = e.pageX, my = e.pageY; if (mx> circleCenter [0] - radio && mx < circleCenter[0] + radius && my > circleCenter [1] - radio && my < circleCenter[1] + radius) // now we are hovering ); Si bien esto no es necesariamente un patrón de código difícil o poco común, si está acostumbrado a la API del navegador, parece un proceso frustrante solo para verificar el desplazamiento. Este es un patrón muy común en otros motores de programación de interfaz de nivel inferior como Unity3D o Processing. Pero en el mundo web, tenemos herramientas a nuestra disposición que ya manejan muchos de los objetivos interactivos comunes que podemos tener. Podría escribir un conjunto de funciones de conveniencia para realizar tareas comunes, pero ¿no preferiría llegar al punto? En contraste, podemos ver la simplicidad de la misma tarea usando SVG.
$ ("svg path # circle"). on ("hover", function (event) // Eso es todo.); Esto es claramente mucho más eficiente en el tiempo para los desarrolladores de scripts de interactividad simple.
Hay un montón de bibliotecas de JavaScript para el lienzo (como KineticJS, que te permitirán hacer cosas increíbles. Pero si eres como yo, no estás usando motores físicos completos en tus aplicaciones web. A menudo, necesito iconos escalables, gráficos interactivos y formas detalladas y estéticamente hermosas de presentar información a mis usuarios. La mayoría de las físicas que necesito son simples ecuaciones de facilitación. Estos elementos gráficos se crean fácilmente con SVG y una multitud de físicas simples. Las ecuaciones probablemente manejarán el resto de mis necesidades. Así que echemos un vistazo a algunas aplicaciones prácticas para SVG.
Ahora que hemos analizado algunas de las ventajas de SVG, examinemos por qué muchos desarrolladores siguen optando por no usar SVG. Hay dos razones principales por las que muchos desarrolladores no utilizan SVG.
Así que, por supuesto, nadie realmente quiere sentarse y editar los puntos en el SVG XML. Por suerte, nadie lo necesita! Esta es la parte que la gente a menudo no se da cuenta; Hay herramientas para editar SVG, para que nunca tenga que hacerlo a mano.
Si posee un editor vectorial, lo más probable es que pueda guardar su archivo como un svg. Sigue adelante y pruébalo. Abra Illustrator, dibuje un círculo o dos y luego guarde el archivo como SVG. A continuación, abra ese archivo en Sublime Text u otro editor de texto. Inmediatamente verá que, además de algunos metadatos adicionales, el SVG XML está listo para colocarlo directamente en su archivo HTML. Lo más probable es que veas (el padre svg) elementos.
Si bien es totalmente capaz de colocar su archivo SVG XML directamente en un archivo HTML, ¿qué sucede si desea que se cree dinámicamente el SVG? D3.js es "una biblioteca de JavaScript para manipular documentos basados en datos". En otras palabras, es excelente para generar elementos SVG como gráficos de barras y trazados de líneas basados en un conjunto de datos. Hemos elegido mostrar D3 debido a su vocabulario correspondiente a la implementación real de SVG en el navegador; tenga en cuenta que hay otras bibliotecas SVG geniales en libertad (en particular, Raphael.js).
Aunque D3.js hace más que la manipulación de SVG, por brevedad, eso es todo lo que usaremos para hoy. (Asegúrese de echar un vistazo a los ejemplos en el sitio oficial de D3.js, y eche un vistazo a este taller que Mike ha publicado en su sitio personal).
En este primer ejemplo, simplemente estamos creando un círculo pulsante usando Math.sin y un iterador con un setInterval. Circulo pulsante
En este ejemplo, estamos actualizando una gráfica de líneas trazada con algunos valores aleatorios. Gráfico de líneas
SVG manejará muchas de sus necesidades para la representación de imágenes en el navegador. Si bien hay muchas razones para usar SVG, como con cualquier cosa genial, hay cosas que no hacen bien.
Aquí hay algunos enlaces útiles para que te enredes más en SVG!
¿Qué otros usos has encontrado para SVG? Háganos saber en la sección de comentarios y muchas gracias por leer..
