6 échecs SVG courants (et comment les corriger)

Quelqu'un m'a récemment demandé comment j'abordais le débogage des SVG en ligne. Parce qu'il fait partie du DOM, nous pouvons inspecter n'importe quel SVG en ligne dans n'importe quel navigateur DevTools. Et à cause de cela, nous avons la capacité d'examiner les choses et de découvrir tous les problèmes ou opportunités potentiels pour optimiser le SVG.

Mais parfois, nous ne pouvons même pas voir nos SVG du tout. Dans ces cas, il y a six éléments spécifiques que je recherche lorsque je débogue.

1. le viewBox valeurs

La viewBox est un point de confusion courant lorsque vous travaillez avec SVG. C'est techniquement bien d'utiliser SVG en ligne sans lui, mais nous perdrions l'un de ses avantages les plus importants : la mise à l'échelle avec le conteneur. En même temps, cela peut jouer contre nous s'il est mal configuré, ce qui entraîne un écrêtage indésirable.

Les éléments sont là lorsqu'ils sont découpés — ils sont juste dans une partie du système de coordonnées que nous ne voyons pas. Si nous devions ouvrir le fichier dans un programme d'édition graphique, il pourrait ressembler à ceci :

Le moyen le plus simple de résoudre ce problème ? Ajouter overflow="visible" au SVG, que ce soit dans notre feuille de style, en ligne sur le style attribut ou directement en tant qu'attribut de présentation SVG. Mais si nous appliquons également une background-color au SVG ou si nous avons d'autres éléments autour de lui, les choses peuvent sembler un peu décalées. Dans ce cas, la meilleure option sera de modifier le viewBox pour afficher la partie du système de coordonnées qui était masquée :

Il y a quelques éléments supplémentaires concernant viewBox qui valent la peine d'être couverts pendant que nous sommes sur le sujet:

Comment le viewBox marche ?

SVG est une toile infinie, mais nous pouvons contrôler ce que nous voyons et comment nous le voyons à travers la fenêtre et le viewBox.

La fenêtre est un cadre de fenêtre sur la toile infinie. Ses dimensions sont définies par width ainsi que le height attributs, ou en CSS avec les attributs correspondants width ainsi que le height Propriétés. Nous pouvons spécifier n'importe quelle unité de longueur que nous voulons, mais si nous fournissons des nombres sans unité, ils sont par défaut en pixels.

La viewBox est défini par quatre valeurs. Les deux premiers sont le point de départ dans le coin supérieur gauche (x ainsi que le y valeurs, nombres négatifs autorisés). Je les édite pour recadrer l'image. Les deux derniers sont la largeur et la hauteur du système de coordonnées à l'intérieur de la fenêtre - c'est là que nous pouvons modifier l'échelle de la grille (que nous aborderons dans la section sur Zoom).

Voici un balisage simplifié montrant le SVG viewBox et par width ainsi que le height attributs tous deux définis sur le <svg>:

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

Recadrage

Donc ça:

<svg viewBox="0 0 700 700">

… mappe à ceci:

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

La fenêtre que nous voyons commence là où 0 en abscisse et 0 sur l'axe y se rencontrent.

En changeant ceci :

<svg viewBox="0 0 700 700">

…pour ça:

<svg viewBox="300 200 700 700">

…la largeur et la hauteur restent les mêmes (700 unités chacun), mais le début du système de coordonnées est maintenant au 300 point sur l'axe des abscisses et 200 sur l'axe y.

Dans la vidéo suivante j'ajoute un rouge <circle> au SVG avec son centre à la 300 point sur l'axe des abscisses et 200 sur l'axe y. Remarquez comment changer le viewBox coordonnées aux mêmes valeurs change également le placement du cercle dans le coin supérieur gauche du cadre tandis que la taille rendue du SVG reste la même (700×700). Je n'ai fait que "recadrer" les choses avec le viewBox.

Zoom

Nous pouvons changer les deux dernières valeurs à l'intérieur du viewBox pour agrandir ou réduire l'image. Plus les valeurs sont élevées, plus d'unités SVG sont ajoutées pour s'adapter à la fenêtre d'affichage, ce qui donne une image plus petite. Si nous voulons garder un ratio de 1:1, notre viewBox largeur et hauteur doivent correspondre à nos valeurs de largeur et de hauteur de fenêtre.

Voyons ce qui se passe dans Illustrator lorsque nous modifions ces paramètres. Le plan de travail est le viewport qui est représenté par un carré blanc de 700 pixels. Tout le reste en dehors de cette zone est notre canevas SVG infini et est coupé par défaut.

La figure 1 ci-dessous montre un point bleu à 900 le long de l'axe des x et 900 le long de l'axe y. Si je change les deux derniers viewBox valeurs de 700 à 900 comme ça:

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

…alors le point bleu est presque entièrement de nouveau visible, comme le montre la figure 2 ci-dessous. Notre image est réduite car nous avons augmenté les valeurs de viewBox, mais les dimensions réelles de largeur et de hauteur du SVG sont restées les mêmes, et le point bleu est revenu plus près de la zone non découpée.

Il y a un carré rose comme preuve de la façon dont la grille s'adapte à la fenêtre : l'unité devient plus petite et plus de lignes de grille s'intègrent dans la même zone de la fenêtre. Vous pouvez jouer avec les mêmes valeurs dans le stylet suivant pour voir ce travail en action :

2. Manquant width ainsi que le height

Une autre chose courante que je regarde lors du débogage de SVG en ligne est de savoir si le balisage contient le width or height les attributs. Ce n'est pas grave dans de nombreux cas, sauf si le SVG se trouve dans un conteneur avec un positionnement absolu ou un conteneur flexible (car Safari calcule le SVG width valeur avec 0px au lieu de auto). À l'exclusion width or height dans ces cas nous empêche de voir l'image complète, comme nous pouvons le voir par ouvrir cette démo CodePen et en le comparant dans Chrome, Safari et Firefox (appuyez sur les images pour une vue plus grande).

La solution? Ajoutez une largeur ou une hauteur, que ce soit en tant qu'attribut de présentation, en ligne dans l'attribut de style ou en CSS. Évitez d'utiliser la hauteur seule, en particulier lorsqu'elle est réglée sur 100% or auto. Une autre solution consiste à régler le droit ainsi que le valeurs de gauche.

Vous pouvez jouer avec le stylo suivant et combiner les différentes options.

3. Par inadvertance fill ainsi que le stroke les couleurs

Il se peut aussi que nous appliquions de la couleur sur <svg> balise, qu'il s'agisse d'un style en ligne ou venant de CSS. C'est bien, mais il peut y avoir d'autres valeurs de couleur dans le balisage ou des styles qui entrent en conflit avec la couleur définie sur le <svg>, ce qui rend les pièces invisibles.

C'est pourquoi j'ai tendance à rechercher fill ainsi que le stroke attributs dans le balisage du SVG et effacez-les. La vidéo suivante montre un SVG que j'ai stylisé en CSS avec un rouge fill. Il y a quelques cas où des parties du SVG sont remplies en blanc directement dans le balisage que j'ai supprimé pour révéler les pièces manquantes.

4. Pièces d'identité manquantes

Celui-ci peut sembler super évident, mais vous seriez surpris de la fréquence à laquelle je le vois apparaître. Disons que nous avons créé un fichier SVG dans Illustrator et que nous avons fait très attention à nommer nos calques afin que vous obteniez de bons identifiants correspondants dans le balisage lors de l'exportation du fichier. Et disons que nous prévoyons de styliser ce SVG en CSS en nous connectant à ces identifiants.

C'est une belle façon de faire les choses. Mais il y a de nombreuses fois où j'ai vu le même fichier SVG exporté une deuxième fois au même emplacement et les ID sont différents, généralement lors du copier/coller des vecteurs directement. Peut-être qu'un nouveau calque a été ajouté, ou que l'un des calques existants a été renommé ou quelque chose du genre. Quoi qu'il en soit, les règles CSS ne correspondent plus aux identifiants du balisage SVG, ce qui entraîne un rendu différent du SVG par rapport à ce à quoi vous vous attendiez.

Dans les gros fichiers SVG, il peut être difficile de trouver ces identifiants. C'est le bon moment pour ouvrir les DevTools, inspecter la partie du graphique qui ne fonctionne pas et voir si ces ID correspondent toujours.

Donc, je dirais que cela vaut la peine d'ouvrir un fichier SVG exporté dans un éditeur de code et de le comparer à l'original avant d'échanger des éléments. Des applications comme Illustrator, Figma et Sketch sont intelligentes, mais cela ne signifie pas que nous ne sommes pas responsables de leur vérification.

5. Liste de contrôle pour le détourage et le masquage

Si un SVG est tronqué de manière inattendue et que le viewBox vérifie bien, je regarde habituellement le CSS pour clip-path or mask propriétés qui pourraient interférer avec l'image. Il est tentant de continuer à regarder le balisage en ligne, mais il est bon de se rappeler que le style d'un SVG peut se produire ailleurs.

Détourage et masquage CSS nous permettent de "masquer" des parties d'une image ou d'un élément. En SVG, <clipPath> est une opération vectorielle qui coupe des parties d'une image sans résultats à mi-chemin. Les <mask> tag est une opération de pixel qui permet la transparence, les effets de semi-transparence et les bords flous.

Voici une petite liste de contrôle pour le débogage des cas où l'écrêtage et le masquage sont impliqués :

• Assurez-vous que le chemin de détourage (ou masque) et le graphique se chevauchent. Les parties qui se chevauchent sont ce qui est affiché.
• Si vous avez un chemin complexe qui ne croise pas votre graphique, essayez d'appliquer des transformations jusqu'à ce qu'elles correspondent.
• Vous pouvez toujours inspecter le code interne avec les DevTools même si le <clipPath> or <mask> ne sont pas rendus, alors utilisez-le !
• Copiez le balisage à l'intérieur <clipPath> ainsi que le <mask> et collez-le avant de fermer le </svg> étiqueter. Ajoutez ensuite un fill à ces formes et vérifiez les coordonnées et les dimensions du SVG. Si vous ne voyez toujours pas l'image, essayez d'ajouter overflow="hidden" à la <svg> Étiquette.
• Vérifiez qu'un expérience unique et authentique L'identifiant est utilisé pour <clipPath> or <mask>, et que le même ID est appliqué aux formes ou au groupe de formes qui sont tronqués ou masqués. Un ID incompatible cassera l'apparence.
• Vérifiez les fautes de frappe dans le balisage entre le <clipPath> or <mask> Mots clés.
• fill, stroke, opacity, ou d'autres styles appliqués aux éléments à l'intérieur <clipPath> sont inutiles - la seule partie utile est la géométrie de la région de remplissage de ces éléments. C'est pourquoi si vous utilisez un <polyline> il se comportera comme un <polygon> et si vous utilisez un <line> vous ne verrez aucun effet d'écrêtage.
• Si vous ne voyez pas votre image après avoir appliqué un <mask>, assurez-vous que le fill du contenu de masquage n'est pas entièrement noir. La luminance de l'élément de masquage détermine l'opacité du graphique final. Vous pourrez voir à travers les parties les plus claires et les parties les plus sombres masqueront le contenu de votre image.

Vous pouvez jouer avec des éléments masqués et découpés dans Ce stylo.

6. Espaces de noms

Saviez-vous que SVG est un langage de balisage basé sur XML ? Et bien ça l'est! L'espace de noms pour SVG est défini sur le xmlns attribut:

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

Il y a beaucoup à savoir sur l'espacement des noms en XML et MDN a une excellente introduction à ce sujet. Il suffit de dire que l'espace de noms fournit un contexte au navigateur, l'informant que le balisage est spécifique à SVG. L'idée est que les espaces de noms aident à prévenir les conflits lorsque plusieurs types de XML se trouvent dans le même fichier, comme SVG et XHTML. C'est un problème beaucoup moins courant dans les navigateurs modernes, mais cela pourrait aider à expliquer les problèmes de rendu SVG dans les navigateurs plus anciens ou les navigateurs comme Gecko qui sont stricts lors de la définition des doctypes et des espaces de noms.

La spécification SVG 2 ne nécessite pas d'espace de noms lors de l'utilisation de la syntaxe HTML. Mais c'est crucial si la prise en charge des navigateurs hérités est une priorité - de plus, cela ne fait aucun mal de l'ajouter. De cette façon, lorsque le <html> éléments xmlns attribut est défini, il n'y aura pas de conflit dans ces rares cas.

<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>

Cela est également vrai lors de l'utilisation de SVG en ligne dans CSS, comme le définir comme image d'arrière-plan. Dans l'exemple suivant, une icône de coche apparaît sur l'entrée après une validation réussie. Voici à quoi ressemble le 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;
}

Lorsque nous supprimons l'espace de noms à l'intérieur du SVG dans la propriété background, l'image disparaît :

Un autre préfixe d'espace de noms courant est xlink:href. Nous l'utilisons beaucoup pour référencer d'autres parties du SVG comme : les motifs, les filtres, les animations ou les dégradés. La recommandation est de commencer à le remplacer par href car l'autre est obsolète depuis SVG 2, mais il peut y avoir des problèmes de compatibilité avec les anciens navigateurs. Dans ce cas, nous pouvons utiliser les deux. N'oubliez pas d'inclure l'espace de noms xmlns:xlink="http://www.w3.org/1999/xlink" si vous utilisez encore xlink:href.

Améliorez vos compétences en SVG !

J'espère que ces conseils vous feront gagner beaucoup de temps si vous vous retrouvez à dépanner des SVG en ligne mal rendus. Ce sont juste les choses que je recherche. Peut-être que vous avez différents drapeaux rouges que vous surveillez - si c'est le cas, dites-le moi dans les commentaires !

L'essentiel est qu'il est avantageux d'avoir au moins une compréhension de base de les différentes façons d'utiliser SVG. Défis CodePen intègrent souvent SVG et offrent de bonnes pratiques. Voici quelques ressources supplémentaires pour passer au niveau supérieur :

Il y a quelques personnes que je suggère de suivre pour les qualités liées au SVG :

• Contenu propulsé par le référencement et distribution de relations publiques. Soyez amplifié aujourd'hui.
• Platoblockchain. Intelligence métaverse Web3. Connaissance Amplifiée. Accéder ici.
• La source: https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/