SVG Viewport y viewBox (para principiantes completos)

En este tutorial rápido de viewport y viewBox de SVG, vamos a desglosar exactamente qué viewport y viewBox están en SVG para la web. Usted aprenderá:

  • La diferencia entre la ventana gráfica y viewBox
  • Los aspectos de sus SVG que puede controlar con cada
  • Cómo se aplican cada uno

¡Vamos a empezar!

Vista de SVG

Si literalmente descompone la palabra «ventana gráfica», obtendrá una pista sobre su función en SVG; crea un «puerto» a través del cual puede «ver» una sección de un SVG. Puedes imaginar esto como algo parecido a una ventana de ojo de buey a través de la cual puedes ver el mundo más allá.

La ventana gráfica SVG es como una ventana de ojo de buey cuyo tamaño determina lo que se puede ver a través de ella.

Al igual que con una ventana, el tamaño de la ventana gráfica determina cuánto puede ver, pero no define el tamaño de lo que sea visible a través de esa ventana. Lo que está al otro lado, teóricamente, podría ser de cualquier tamaño.

Por ejemplo, puede tener una forma en su gráfico que sea 100px por 100px, pero si configura la ventana gráfica SVG en 50px por 50px solo verá una parte de esa forma. El tamaño de la ventana gráfica se establece agregando width y height atributos a la svg elemento, así:

En el primer SVG vemos todo el 100px por 100px círculo, pero en el segundo SVG cuando establecemos el tamaño de nuestra ventana gráfica en 50px por 50px solo vemos una cuarta parte del círculo.

ViewBox SVG

La viewBox se puede considerar como la ventana gráfica pero con dos características adicionales: puede «desplazarse» y puede «hacer zoom». Sobre la base de la analogía de «mirar a través del cristal», si la ventana es como una ventana, viewBox es como un telescopio.

El viewBox SVG es muy similar al viewport pero también puede desplazarse y hacer zoom como un telescopio

Parámetros de viewBox

Hablemos del zoom SVG. Controlamos el viewBox agregándolo como un atributo a la svg elemento, con un valor que comprende cuatro números separados por espacios:

Los dos primeros números definen la posición del viewBox, que consideraremos como «panorámica». Los dos últimos números definen las dimensiones del viewBox, que consideraremos como «hacer zoom».

Nota: así como el svg elemento, el viewBox El atributo también se puede utilizar en los elementos. symbol, marker, pattern y view.

Zoom SVG

Empezaremos mirando «hacer zoom», que podemos hacer con los dos últimos viewBox parámetros: width y height respectivamente. Dejaremos los dos primeros parámetros en 0 0 por ahora.

Si esos dos últimos parámetros tienen las mismas dimensiones que la ventana gráfica, no se puede acercar ni alejar, por lo que no cambia nada. Eche un vistazo al SVG número 3, por ejemplo:

Pero si hacemos esos dos números más grandes que las dimensiones de la ventana gráfica, efectivamente lo alejaremos, y si los hacemos más pequeños, lo acercaremos.

En SVG número 4 en el ejemplo anterior hemos establecido el viewBox width y height a 100, que es el doble del tamaño de nuestra ventana gráfica. Esto «se aleja» y muestra el doble del contenido, revelando nuevamente el círculo completo.

En el quinto SVG nuestro viewBox está configurado en un width y height de 25, que es la mitad del tamaño de nuestra ventana gráfica. Este zoom de SVG viewBox «acerca», mostrando la mitad de la cantidad de contenido.

Panorámica

Los primeros dos viewBox Los parámetros le permiten «desplazarse» configurando donde la esquina superior izquierda de la viewBox debiera ser. El primer número controla la posición horizontal y el segundo controla la posición vertical.

  • Para desplazarse a la derecha, aumente el primer número.
  • Para desplazarse a la izquierda, disminuya el primer número.
  • Para desplazarse hacia abajo, aumente el segundo número.
  • Para desplazarse, disminuya el segundo número.

Eche un vistazo a cómo funciona esta panorámica en este ejemplo. Para recordarle, el SVG número 3 tiene un 50 por 50 viewport, el viewBox se agrega pero sin paneo ni zoom. El número 6 es el mismo, pero desplazado hacia la derecha y hacia abajo:

Panorámica y zoom juntos

Por supuesto, puede desplazarse y hacer zoom al mismo tiempo, utilizando los cuatro parámetros a la vez, por ejemplo:

Al usar viewBox, configure su ventana gráfica

Siempre que use el viewBox atributo, recuerde establecer las dimensiones de su ventana gráfica también. Si no lo hace, el valor predeterminado será 100% y es probable que tenga un gráfico de gran tamaño:

SVG ViewBox explicado en pocas palabras

Resumamos todo en algunos puntos:

  • La ventana gráfica es como una ventana por la que se mira para ver el contenido de un SVG.
  • La viewBox es similar a la ventana gráfica, pero también puede utilizarla para «desplazarse» y «hacer zoom» como un telescopio.
  • Controla la ventana gráfica a través de width y height parámetros en el svg elemento.
  • Controle el viewBox agregando el atributo viewBox hacia svg elemento. También se puede utilizar en los elementos. symbol, marker, pattern y view.
  • La viewBox El valor del atributo se compone de cuatro parámetros separados por espacios.
  • Los primeros dos viewBox los parámetros controlan la «panorámica» y los dos últimos controlan el «zoom».
  • Aumente el primer parámetro a «panorámica» a la derecha, disminuya a «panorámica» a la izquierda.
  • Aumente el segundo parámetro para «pan» hacia abajo, disminuya para «pan» hacia arriba.
  • Hacer el viewBox dimensiones, es decir, los dos últimos parámetros, más grandes que los de la ventana gráfica para «alejar», y más pequeños para «acercar».

Espero que ayude a aclarar las aguas a veces turbias de SVG viewport y viewBox. ¡Feliz creación de SVG!

Dónde encontrar los mejores iconos SVG en 2021

Conoce los conceptos básicos de la ventana gráfica SVG y la ventana gráfica SVG. Hemos cubierto qué es un viewBox y cómo ajustar el zoom SVG y otros parámetros.

Ahora, ¿te estás preguntando dónde conseguir? iconos SVG profesionales para utilizar en sus proyectos? Echa un vistazo a Envato Elements.

Asegúrese de visitar la enorme biblioteca de íconos SVG de Envato Elements.

Este mercado basado en suscripción le ofrece descargas ilimitadas de iconos SVG. Esta es una gran oferta si eres programador, diseñador web o artista digital. ¡Obtendrá acceso ilimitado a plantillas web, temas de WordPress, plantillas de CMS, fotografías de archivo y más!

Más información sobre SVG y diseño web

Hemos hecho la explicación de SVG viewBox, todo sobre los parámetros de zoom de SVG viewBox y más. Si desea obtener más información sobre SVG para diseño web, estos son excelentes recursos.

  • SVG
    Cómo codificar a mano SVG
    Kezz Bracey
  • SVG
    SVG para diseñadores web en 60 segundos
    Kezz Bracey
  • SVG
    Cómo utilizar «animateTransform» para la animación SVG en línea
    Kezz Bracey
  • SVG
    Archivos SVG: de Illustrator a la Web
    Ian Yates

  • SVG
    Cómo mejorar el diseño de su sitio web con formas SVG
    George Martsoukos
  • SVG
    Animar un icono con SVGator, Figma y Envato Elements
    Kezz Bracey
  • SVG
    Cómo hacer un corazón que late animado con SVG
    Ian Yates
  • Accesibilidad
    SVG accesible: métodos para agregar contenido alternativo
    Carie Fisher

Nota editorial: esta publicación se ha actualizado con contribuciones de María Villanueva. María es redactora de personal de Codigonautas+.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *