6 fallas comunes de SVG (y cómo solucionarlas)

Alguien me preguntó recientemente cómo enfoco la depuración de SVG en línea. Debido a que es parte del DOM, podemos inspeccionar cualquier SVG en línea en cualquier navegador DevTools. Y debido a eso, tenemos la capacidad de analizar las cosas y descubrir cualquier problema u oportunidad potencial para optimizar el SVG.

Pero a veces, ni siquiera podemos ver nuestros SVG. En esos casos, hay seis cosas específicas que busco cuando estoy depurando.

1. los viewBox valores

La viewBox es un punto común de confusión cuando se trabaja con SVG. Está técnicamente bien usar SVG en línea sin él, pero perderíamos uno de sus beneficios más significativos: escalar con el contenedor. Al mismo tiempo, puede jugar en nuestra contra cuando se configura incorrectamente, lo que resulta en un recorte no deseado.

Los elementos están ahí cuando están recortados, solo están en una parte del sistema de coordenadas que no vemos. Si tuviéramos que abrir el archivo en algún programa de edición de gráficos, podría verse así:

¿La forma más fácil de arreglar esto? Agregar overflow="visible" al SVG, ya sea en nuestra hoja de estilo, en línea en el style atributo o directamente como un atributo de presentación SVG. Pero si también aplicamos un background-color al SVG o si tenemos otros elementos a su alrededor, las cosas pueden verse un poco mal. En este caso, la mejor opción será editar el viewBox para mostrar esa parte del sistema de coordenadas que estaba oculta:

Hay algunas cosas adicionales sobre el viewBox que vale la pena cubrir mientras estamos en el tema:

Cómo hace el viewBox funciona?

SVG es un lienzo infinito, pero podemos controlar lo que vemos y cómo lo vemos a través de la ventana gráfica y el viewBox.

La ventana es un marco de ventana en el lienzo infinito. Sus dimensiones están definidas por width y height atributos, o en CSS con los correspondientes width y height propiedades. Podemos especificar cualquier unidad de longitud que queramos, pero si proporcionamos números sin unidades, por defecto son píxeles.

La viewBox se define por cuatro valores. Los dos primeros son el punto de partida en la esquina superior izquierda (x y y valores, números negativos permitidos). Estoy editando estos para reencuadrar la imagen. Los dos últimos son el ancho y la altura del sistema de coordenadas dentro de la ventana gráfica; aquí es donde podemos editar la escala de la cuadrícula (que abordaremos en la sección sobre Zoom).

Aquí hay un marcado simplificado que muestra el SVG viewBox y del width y height atributos ambos establecidos en el <svg>:

<svg viewBox="0 0 700 700" width="700" height="700"> <!-- etc. -->
</svg>

Replanteando

Así que esto:

<svg viewBox="0 0 700 700">

…mapas a esto:

<svg viewBox="start-x-axis start-y-axis width height">

La ventana gráfica que vemos comienza donde 0 en el eje xy 0 en el eje y se encuentran.

Cambiando esto:

<svg viewBox="0 0 700 700">

…a esto:

<svg viewBox="300 200 700 700">

…el ancho y la altura siguen siendo los mismos (700 unidades cada uno), pero el comienzo del sistema de coordenadas está ahora en el 300 punto en el eje x y 200 en el eje y.

En el siguiente video estoy agregando un rojo <circle> al SVG con su centro en el 300 punto en el eje x y 200 en el eje y. Observe cómo cambiar el viewBox coordenadas a los mismos valores también cambia la ubicación del círculo en la esquina superior izquierda del marco, mientras que el tamaño renderizado del SVG sigue siendo el mismo (700×700). Todo lo que hice fue "reencuadrar" las cosas con el viewBox.

Zoom

Podemos cambiar los dos últimos valores dentro del viewBox para acercar o alejar la imagen. Cuanto mayores sean los valores, más unidades SVG se agregan para que quepan en la ventana gráfica, lo que da como resultado una imagen más pequeña. Si queremos mantener una proporción de 1:1, nuestro viewBox el ancho y la altura deben coincidir con nuestros valores de ancho y alto de la ventana gráfica.

Veamos qué sucede en Illustrator cuando cambiamos estos parámetros. La mesa de trabajo es el viewport que está representado por un cuadrado blanco de 700px. Todo lo demás fuera de esa área es nuestro lienzo SVG infinito y se recorta de forma predeterminada.

La figura 1 a continuación muestra un punto azul en 900 a lo largo del eje x y 900 a lo largo del eje y. Si cambio los dos últimos viewBox valores de 700 a 900 Me gusta esto:

<svg viewBox="300 200 900 900" width="700" height="700">

… entonces el punto azul vuelve a estar casi completamente a la vista, como se ve en la Figura 2 a continuación. Nuestra imagen se redujo porque aumentamos los valores de viewBox, pero las dimensiones reales de ancho y alto del SVG se mantuvieron iguales, y el punto azul volvió a acercarse al área sin recortar.

Hay un cuadrado rosa como evidencia de cómo la cuadrícula se escala para ajustarse a la ventana gráfica: la unidad se vuelve más pequeña y más líneas de cuadrícula encajan en la misma área de la ventana gráfica. Puede jugar con los mismos valores en el siguiente Pen para ver ese trabajo en acción:

2. Falta width y height

Otra cosa común que observo al depurar SVG en línea es si el marcado contiene el width or height atributos Esto no es gran cosa en muchos casos a menos que el SVG esté dentro de un contenedor con posicionamiento absoluto o un contenedor flexible (ya que Safari calcula el SVG width valor con 0px en lugar de auto). Excluyendo width or height en estos casos nos impide ver la imagen completa, como podemos ver por abriendo esta demostración de CodePen y comparándolo en Chrome, Safari y Firefox (toque las imágenes para ampliarlas).

¿La solución? Agregue un ancho o alto, ya sea como un atributo de presentación, en línea en el atributo de estilo o en CSS. Evite usar la altura por sí sola, especialmente cuando se establece en 100% or auto. Otra solución es establecer el derecho y valores dejados.

Puedes jugar con la pluma siguiente y combinar las diferentes opciones.

3. Involuntario fill y stroke colores

También puede ser que estemos aplicando color a la <svg> etiqueta, ya sea un estilo en línea o proveniente de CSS. Eso está bien, pero podría haber otros valores de color a lo largo del marcado o estilos que entren en conflicto con el conjunto de colores en el <svg>, haciendo que las partes sean invisibles.

Por eso tiendo a buscar el fill y stroke atributos en el marcado del SVG y eliminarlos. El siguiente video muestra un SVG que diseñé en CSS con un rojo fill. Hay un par de casos en los que partes del SVG se rellenan en blanco directamente en el marcado que eliminé para revelar las piezas que faltan.

4. ID faltantes

Este puede parecer súper obvio, pero te sorprendería la frecuencia con la que lo veo surgir. Digamos que creamos un archivo SVG en Illustrator y fuimos muy diligentes en nombrar nuestras capas para que obtenga IDs coincidentes agradables en el marcado al exportar el archivo. Y digamos que planeamos diseñar ese SVG en CSS conectando esas ID.

Esa es una buena manera de hacer las cosas. Pero hay muchas ocasiones en las que he visto el mismo archivo SVG exportado por segunda vez a la misma ubicación y las ID son diferentes, generalmente al copiar/pegar los vectores directamente. Tal vez se agregó una nueva capa, o se cambió el nombre de una de las existentes o algo así. Cualquiera que sea el caso, las reglas de CSS ya no coinciden con los ID en el marcado SVG, lo que hace que el SVG se represente de manera diferente a lo esperado.

En archivos SVG de gran tamaño, puede que nos resulte difícil encontrar esos ID. Este es un buen momento para abrir DevTools, inspeccionar la parte del gráfico que no funciona y ver si esas ID aún coinciden.

Entonces, diría que vale la pena abrir un archivo SVG exportado en un editor de código y compararlo con el original antes de cambiarlo. Las aplicaciones como Illustrator, Figma y Sketch son inteligentes, pero eso no significa que no seamos responsables de examinarlas.

5. Lista de verificación para recortar y enmascarar

Si un SVG se recorta inesperadamente y el viewBox sale bien, normalmente miro el CSS para clip-path or mask propiedades que puedan interferir con la imagen. Es tentador seguir mirando el marcado en línea, pero es bueno recordar que el estilo de un SVG podría estar ocurriendo en otro lugar.

Recorte y enmascaramiento de CSS nos permite “ocultar” partes de una imagen o elemento. en SVG, <clipPath> es una operación vectorial que corta partes de una imagen sin resultados intermedios. Él <mask> La etiqueta es una operación de píxeles que permite transparencia, efectos de semitransparencia y bordes borrosos.

Esta es una pequeña lista de verificación para depurar casos en los que están involucrados el recorte y el enmascaramiento:

• Asegúrese de que el trazado de recorte (o máscara) y el gráfico se superpongan entre sí. Las partes superpuestas son las que se muestran.
• Si tiene una ruta compleja que no se cruza con su gráfico, intente aplicar transformaciones hasta que coincidan.
• Todavía puede inspeccionar el código interno con DevTools aunque el <clipPath> or <mask> no se renderizan, ¡así que úsalo!
• Copie el marcado dentro <clipPath> y <mask> y pegarlo antes de cerrar el </svg> etiqueta. Luego agrega un fill a esas formas y verifique las coordenadas y dimensiones del SVG. Si aún no ve la imagen, intente agregar overflow="hidden" En el correo electrónico “Su Cuenta de Usuario en su Nuevo Sistema XNUMXCX”. <svg> etiqueta.
• Comprueba que un único La identificación se utiliza para el <clipPath> or <mask>y que se aplica el mismo Id. a las formas o al grupo de formas que se recortan o enmascaran. Una identificación que no coincida romperá la apariencia.
• Compruebe si hay errores tipográficos en el marcado entre el <clipPath> or <mask> las etiquetas.
• fill, stroke, opacity, o algunos otros estilos aplicados a los elementos dentro <clipPath> son inútiles: la única parte útil es la geometría de la región de relleno de esos elementos. Es por eso que si usas un <polyline> se comportará como un <polygon> y si usas un <line> no verá ningún efecto de recorte.
• Si no ve su imagen después de aplicar un <mask>, asegúrese de que el fill del contenido de enmascaramiento no es completamente negro. La luminancia del elemento de enmascaramiento determina la opacidad del gráfico final. Podrá ver a través de las partes más brillantes y las partes más oscuras ocultarán el contenido de su imagen.

Puedes jugar con elementos enmascarados y recortados en este bolígrafo.

6. Espacios de nombres

¿Sabía que SVG es un lenguaje de marcado basado en XML? ¡Bueno, lo es! El espacio de nombres para SVG se establece en el xmlns atributo:

<svg xmlns="http://www.w3.org/2000/svg"> <!-- etc. -->
</svg>

Hay mucho que saber sobre el espacio de nombres en XML y MDN tiene una gran introducción al respecto. Basta con decir que el espacio de nombres proporciona contexto al navegador, informándole que el marcado es específico de SVG. La idea es que los espacios de nombres ayuden a evitar conflictos cuando hay más de un tipo de XML en el mismo archivo, como SVG y XHTML. Este es un problema mucho menos común en los navegadores modernos, pero podría ayudar a explicar los problemas de representación de SVG en navegadores más antiguos o navegadores como Gecko que son estrictos al definir tipos de documentos y espacios de nombres.

La especificación SVG 2 no requiere espacio de nombres cuando se usa sintaxis HTML. Pero es crucial si el soporte para navegadores heredados es una prioridad, además, no está de más agregarlo. De esa manera, cuando el <html> elementos xmlns atributo está definido, no entrará en conflicto en esos casos raros.

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <body> <svg xmlns="http://www.w3.org/2000/svg" width="700px" height="700px"> <!-- etc. --> </svg> </body>
</html>

Esto también es cierto cuando se usa SVG en línea en CSS, como configurarlo como imagen de fondo. En el siguiente ejemplo, aparece un icono de marca de verificación en la entrada después de una validación exitosa. Así es como se ve el CSS:

textarea:valid { background: white url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"> <circle cx="13" cy="13" r="13" fill="%23abedd8"/> <path fill="none" stroke="white" stroke-width="2" d="M5 15.2l5 5 10-12"/> </svg>') no-repeat 98% 5px;
}

Cuando eliminamos el espacio de nombres dentro del SVG en la propiedad de fondo, la imagen desaparece:

Otro prefijo de espacio de nombres común es xlink:href. Lo usamos mucho cuando hacemos referencia a otras partes del SVG como: patrones, filtros, animaciones o degradados. La recomendación es empezar a sustituirlo por href ya que el otro está en desuso desde SVG 2, pero puede haber problemas de compatibilidad con navegadores más antiguos. En ese caso, podemos usar ambos. Solo recuerda incluir el espacio de nombres xmlns:xlink="http://www.w3.org/1999/xlink" si todavía estás usando xlink:href.

¡Sube de nivel tus habilidades SVG!

Espero que estos consejos te ayuden a ahorrar mucho tiempo si te encuentras solucionando problemas de SVG en línea renderizados incorrectamente. Estas son solo las cosas que busco. Tal vez tenga diferentes señales de alerta que tenga en cuenta; si es así, ¡dígame en los comentarios!

La conclusión es que vale la pena tener al menos una comprensión básica de las diversas formas en que se puede usar SVG. Desafíos de CodePen a menudo incorporan SVG y ofrecen buenas prácticas. Aquí hay algunos recursos más para subir de nivel:

Hay algunas personas que sugiero seguir por la bondad relacionada con SVG:

• Distribución de relaciones públicas y contenido potenciado por SEO. Consiga amplificado hoy.
• Platoblockchain. Inteligencia del Metaverso Web3. Conocimiento amplificado. Accede Aquí.
• Fuente: https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/