Es posible que haya oído hablar de SVG y haya pensado: "¿Qué son los gráficos vectoriales escalables de todos modos?" Bueno amigo, ¡has venido al lugar indicado para aprender! Los gráficos vectoriales escalables también se conocen con el acrónimo común, SVG, y es un formato de imagen vectorial basado en el formato XML. SVG fue desarrollado como la mayoría de las otras tecnologías web comunes por el W3C, o World Wide Web Consortium. Es probable que esté familiarizado con SVG incluso si no se da cuenta, ya que muchos de los emoticonos que se han apoderado de nuestra sociedad moderna se crean en formato SVG. Saber qué son los gráficos vectoriales escalables es un requisito previo importante para aprender sobre la biblioteca de JavaScript D3.
¿Por qué debería utilizar gráficos SVG?
Como desarrolladores web, tenemos un conocimiento profundo del trabajo con HTML. Sin embargo, HTML en sí mismo tiene limitaciones. Después de todo, cuando se inventó HTML por primera vez, nunca se pensó que pudiera manejar las cosas avanzadas que le pedimos hoy. En HTML nativo, realmente no puede crear formas complejas. Sin embargo, SVG se basa en XML, que no es tan diferente de HTML. Dado que está familiarizado con HTML, aprender SVG no es un gran salto. Además, SVG admite una amplia gama de formas complejas, vectores, polilíneas, rellenos y mucho más.
SVG se puede diseñar con hojas de estilo en cascada
Otro beneficio de los gráficos vectoriales escalables es que se puede diseñar con CSS estándar.
SVG es altamente programable
SVG vive en el DOM o Modelo de objetos de documento al igual que todos los demás elementos de sus páginas. Como tal, JavaScript se puede utilizar para acceder al DOM y afectar y dibujar dinámicamente SVG. De hecho, la biblioteca de JavaScript D3 es la mejor forma de hacer algo como esto.
Utilice herramientas de dibujo de terceros
Ahora podría estar pensando: "Oye, ¿no será difícil dibujar gráficos atractivos escribiendo marcas que se parezcan a HTML?" Tendrías razón si eso es lo que estás pensando. Afortunadamente, puede usar un programa como Adobe Illustrator para dibujar mucho más fácilmente sus gráficos vectoriales escalables, y ellos simplemente importan el resultado a sus páginas web.
Los gráficos basados en vectores se ven geniales sin importar qué
Ya sea que esté mirando un SVG en su nuevo Apple Watch con una pantalla del tamaño de un par de cuartos, o esté proyectando su computadora portátil en una pantalla LCD de 50 pulgadas, sus gráficos SVG se verán excelentes. Esto se debe a que los vectores usan matemáticas para calcular gráficos basados en muchos puntos que se interconectan. Al usar cosas como proporción, curvas y varias proporciones, los vectores siempre se ven bien y no tienen pixlelización como podría ver con otros formatos gráficos.
Dibujar formas básicas con gráficos vectoriales escalables
¡La mejor manera de aprender acerca de los gráficos vectoriales escalables es dibujar algo! En primer lugar, creemos un área SVG para que podamos empezar a dibujar algunas formas. Con esto, ni siquiera necesitaremos usar capturas de pantalla, simplemente podemos incrustar el HTML de muestra en la página y veremos el resultado.
Formas básicas con SVG
Ahora estamos listos para agregar algunas formas. Comencemos creando primero un rectángulo.
Dibujar un rectángulo SVG
¡Frio! Como podemos ver, ahora hay una forma de rectángulo dentro de nuestra área definida de SVG. Una cosa a tener en cuenta es cómo funcionan lascoordenadasxyy. En este fragmento,xse establece en 100 . Esto significa que el rectángulo comienza a los 100 píxeles desde la izquierda . Estányconfigurados en 50 . Esto significa que desde la parte superior del área definida de SVG, estamos moviendo 50 píxeles hacia abajo . Además, observe la sintaxis de la<rect>etiqueta. Tiene el formato de una etiqueta XML en el sentido de que no tiene etiqueta de cierre, solo una barra de cierre.
Nuestro rectángulo foo es bueno, háganos saber aplicar la técnica de crear un círculo con SVG.
Dibujar un círculo SVG
Una vez más, esto es realmente genial. Hay algunas cosas a tener en cuenta en lo que respecta a los atributos del círculo SVG. Primero están los atributos cxy cy. Cuáles son éstos, son los x del centro y centro de Y coordenadas del círculo para dibujar. Por rsupuesto, es el radio del círculo. Desde nuestra área SVG es 720 por 500, decidimos dividir la diferencia en el cxy cylas coordenadas Y esto hace de nuestro círculo perfectamente en el centro.
Entonces tenemos un rectángulo y tenemos un círculo, ¿qué pasa con los triángulos? También podemos dibujar triángulos con SVG, pero no con una etiqueta dedicada. Necesitamos hacer uso de algo llamado polilínea, veamos cómo.
Dibujar un triángulo usando SVG
La polilínea es un poco complicada, ya que necesitamos especificar cada punto de la forma con una xy una ycoordenada. El formato del atributo de puntos es points="x y, x y, x y". Tenga en cuenta que puede seguir agregando más coordenadas, solo necesita seguir el formato.
También podemos hacer uso de SVG para dibujar texto de una manera realmente limpia y escalable.
Dibujar texto con SVG
Esto funciona muy bien. Una cosa a tener en cuenta es que, a diferencia de <rect> y <circle> , <text> tiene una etiqueta de cierre real, y el texto a mostrar está escrito entre las dos etiquetas.
¿Qué son los gráficos vectoriales escalables? Resumen
En este tutorial, vimos bien qué son los gráficos vectoriales escalables y cómo podemos utilizarlos. Al igual que en la mayoría de los lenguajes de programación, lo primero que aprende es cómo mostrar "Hello World" en la pantalla. Al dibujar algunas de las primitivas de forma básicas, como un rectángulo, un círculo y un triángulo, hemos completado el equivalente de Hello World de SVG. Por supuesto, hay mucho más que saber cuando se trata de SVG, pero este tutorial introductorio nos ha dado suficiente conocimiento para ser peligrosos.
0 Comentarios