6 SVG commun échoue (et comment les réparer)

On m'a demandé récemment comment déboguer en ligne SVG. Parce que cela fait partie du DOM, nous pouvons vérifier n'importe quel SVG en ligne dans Devtools dans n'importe quel navigateur. Pour cette raison, nous avons pu évoluer les choses et repérer tout problème ou possibilité potentiel pour l'optimisation des SVG.

mais parfois, nous ne pouvons même pas voir notre SVG du tout. Dans ces cas, je recherche six aspects spécifiques lors du débogage.

1.

Lors de l'utilisation de SVG, Viewbox est un point de confusion commun. Techniquement, il est normal d'utiliser SVG en ligne sans Viewbox, mais nous perdons l'un de ses avantages les plus importants: la mise à l'échelle avec les conteneurs. Dans le même temps, s'il est mal configuré, cela peut nous nuire, entraînant une culture inattendue.

Lorsque les éléments sont recadrés, ils sont là - ils ne font qu'une partie du système de coordonnées que nous ne pouvons pas voir. Si nous ouvrons le fichier dans un programme d'édition graphique, cela pourrait ressembler à ceci:

Quelle est la solution la plus simple? Ajoutez

à SVG, que ce soit dans une feuille de style, dans un attribut de style en ligne, ou directement en SVG pour représenter les propriétés. Cependant, si nous appliquons également les couleurs d'arrière-plan à SVG ou que nous avons d'autres éléments autour, les choses peuvent sembler un peu fausses. Dans ce cas, la meilleure option consiste à modifier la Viewbox pour afficher la pièce du système de coordonnées cachées: overflow="visible"

À propos de Viewbox, il y a des choses supplémentaires à discuter:

Comment fonctionne Viewbox?

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

Version est le cadre de fenêtre sur la toile infinie. Ses dimensions sont définies par les propriétés et width, ou sont définies à l'aide des propriétés correspondantes height et width dans CSS. Nous pouvons spécifier n'importe quelle unité de longueur que nous voulons, mais si nous fournissons des nombres sans unité, ils par défaut aux pixels. height

Viewbox est défini par quatre valeurs. Les deux premiers sont les points de départ du coin supérieur gauche (valeurs x et y, les nombres négatifs sont autorisés). Je les édite pour recomposer. Les deux derniers sont la largeur et la hauteur du système de coordonnées dans la fenêtre - nous pouvons ici modifier l'échelle de la grille (nous en discuterons dans la section de mise à l'échelle).

Les éléments suivants sont des marqueurs simplifiés montrant les propriétés SVG Viewbox et

et <svg></svg> définies sur width: height

<svg height="700" viewbox="0 0 700 700" width="700"></svg>

Recomposer

donc, ceci:

<svg viewbox="0 0 700 700"></svg>

… Carte à ceci:

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

La fenêtre que nous voyons commence où 0 sur l'axe des x et 0 sur l'axe y se croisent.

Modifiez ce contenu:

<svg viewbox="0 0 700 700"></svg>

… à ce point:

<svg viewbox="300 200 700 700"></svg>

… La largeur et la hauteur restent les mêmes (700 unités chacune), mais le point de départ du système de coordonnées est désormais à 300 points sur l'axe X et 200 points sur l'axe Y.

Dans la vidéo ci-dessous, j'ai ajouté un rouge <circle></circle> au SVG, avec le centre à 300 points sur l'axe X et 200 points sur l'axe Y. Notez que la modification des coordonnées Viewbox en la même valeur modifie également le placement du cercle dans le coin supérieur gauche du cadre, tandis que la taille de rendu du SVG reste la même (700 × 700). Tout ce que j'ai fait, c'est "Recomposer" avec Viewbox.

zoom

Nous pouvons modifier les deux dernières valeurs de la Viewbox pour zoomer ou sortir de l'image. Plus la valeur est grande, plus les unités SVG ajoutent à la fenêtre, ce qui entraîne des images plus petites. Si nous voulons maintenir un rapport 1: 1, la largeur et la hauteur de notre Viewbox doivent correspondre à la largeur de notre fenêtre et à nos valeurs de hauteur.

Voyons ce qui se passe lorsque vous modifiez ces paramètres dans Illustrator. L'art est une fenêtre, représentée par un carré blanc de 700 pixels. Tout en dehors de cette zone est notre toile SVG illimitée et sera recadré par défaut.

La figure 1 suivante montre un point bleu situé à 900 sur l'axe X et 900 sur l'axe Y. Si je modifie les deux dernières valeurs Viewbox de 700 à 900, comme indiqué ci-dessous:

<svg height="700" viewbox="0 0 700 700" width="700"></svg>

… Ensuite, les points bleus sont presque complètement de retour à la vue, comme le montre la figure 2 ci-dessous. Notre image est réduite car nous augmentons la valeur de la boîte de vue, mais les dimensions réelles de largeur et de hauteur du SVG restent les mêmes, et le point bleu revient plus près de la zone non recueillie.

Il y a un carré rose comme preuve de la façon dont les échelles de maillage pour s'adapter à la fenêtre: les unités deviennent plus petites et plus de lignes en filet s'adaptent à la même zone de la fenêtre. Vous pouvez utiliser la même valeur dans le stylo ci-dessous pour voir comment cela fonctionne:

2.

Une autre question courante que je regarde lors du débogage d'un SVG en ligne est de savoir si les attributs

ou width sont inclus dans la balise. Dans de nombreux cas, ce n'est pas grave à moins que le SVG soit situé à l'intérieur d'un conteneur avec un positionnement absolu ou des conteneurs flexibles (car Safari utilise 0px au lieu de l'auto pour calculer la valeur de largeur SVG). Dans ces cas, l'exclusion de la largeur ou de la hauteur nous empêche de voir l'image complète, comme nous l'avons vu en ouvrant cette démo de codepen et en la comparant dans Chrome, Safari et Firefox (en cliquant sur l'image pour voir une vue plus grande). height

Solution? Ajoutez une largeur ou une hauteur, que ce soit comme propriété de représentation, une propriété de style en ligne ou dans CSS. Évitez d'utiliser les hauteurs seules, surtout si elle est définie sur

ou 100%. Une autre solution consiste à définir les valeurs auto et right. left

Vous pouvez l'essayer avec le stylo suivant et combiner différentes options.

3.

Il se peut également que nous appliquons des couleurs aux balises

, que ce soit un style en ligne ou à partir de CSS. C'est bien, mais il peut y avoir d'autres valeurs de couleur dans la balise ou le style qui entrent en conflit avec l'ensemble de couleurs sur

, ce qui fait que certains du contenu sont invisibles. <svg></svg> <svg></svg>

C'est pourquoi j'ai tendance à rechercher les propriétés fill et stroke dans les balises de SVG et de les supprimer. La vidéo suivante montre un SVG que j'ai stylé avec un remplissage rouge CSS. Dans SVG, il y a des endroits où le rembourrage est rempli directement en blanc dans le marqueur, que j'ai retiré pour montrer la partie manquante.

4.

Cela peut sembler très évident, mais vous serez surpris de voir à quelle fréquence je le vois se produire. Supposons que nous ayons fait un fichier SVG dans Illustrator et avons travaillé très dur pour nommer les couches afin que nous puissions obtenir un joli ID correspondant lors de l'exportation du fichier. Supposons que nous prévoyions de styliser le SVG en CSS en nous connectant à ces ID.

C'est une bonne façon de le faire. Cependant, il y a de nombreuses fois où je vois le même fichier SVG exporté vers le même emplacement la deuxième fois et l'ID est différent, généralement lors de la copie / collage directement du vecteur. Peut-être qu'une nouvelle couche a été ajoutée, ou l'une des couches existantes a été renommée, ou autre chose. Dans tous les cas, les règles CSS ne correspondent plus à l'ID dans la balise SVG, ce qui fait rendre le SVG différemment que prévu.

Nous pouvons avoir du mal à trouver ces ID dans de grands fichiers SVG. C'est le bon moment pour ouvrir Devtools, vérifier les sections de graphe qui ne fonctionnent pas et voir si ces ID correspondent toujours.

donc je dirais que cela vaut la peine d'ouvrir le fichier SVG d'exportation dans l'éditeur de code et de le comparer au fichier d'origine avant d'échanger le contenu. Des applications comme Illustrator, Figma et Sketch sont intelligentes, mais cela ne signifie pas que nous n'avons aucune responsabilité de les revoir.

5.

Si le SVG est accidentellement recadré et que la boîte de vue vérifie correctement, je regarde généralement les propriétés

ou

dans CSS qui peuvent interférer avec l'image. Il est tentant de voir des marqueurs en ligne, mais il est préférable de se rappeler que les styles de SVG peuvent se produire ailleurs. clip-path mask CSS La culture et le masquage nous permettent de "masquer" des parties d'une image ou d'un élément. Dans SVG,

est une opération vectorielle qui récolte les parties de l'image sans résultats intermédiaires.

Une étiquette est une opération de pixels qui permet la transparence, les effets translucides et les bords floues. <clippath></clippath> <mask></mask> Voici une petite liste de contrôle pour les situations de débogage impliquant des recadrage et du masquage:

• Assurez-vous que le chemin d'écrêtage (ou le masque) et la figure se chevauchent. La partie qui se chevauche est la partie affichée.
• Si vous avez un chemin complexe qui ne se croit pas avec votre graphique, essayez d'appliquer les transformations jusqu'à ce qu'elles correspondent.
• Même si <clippath></clippath> ou <mask></mask> ne sont pas rendus, vous pouvez toujours utiliser Devtools pour vérifier le code interne, alors utilisez-le!
• Copiez les marques dans <clippath></clippath> et <mask></mask> et collez-les avant de fermer la balise. Ensuite, ajoutez le rembourrage à ces formes et vérifiez les coordonnées et les dimensions du SVG. Si vous ne voyez toujours pas l'image, essayez d'ajouter <svg></svg> à la balise overflow="hidden".
• vérifie si <clippath></clippath> ou <mask></mask> L'ID unique est utilisé et si le même ID est appliqué au groupe de forme ou de forme qui est recadré ou masqué. Une pièce d'identité incompatible peut ruiner l'apparence.
Vérifiez les fautes de frappe dans les marques entre les
• ou <clippath></clippath>. <mask></mask>
• , <clippath></clippath>, fill, stroke, ou un autre style qui est appliqué aux éléments dans opacity est inutile - la seule partie utile est la géométrie de la zone de remplissage de ces éléments. C'est pourquoi si vous utilisez <polyline></polyline>, il se comportera comme <polygon></polygon>, et si vous utilisez <line></line>, vous ne verrez aucun effet de culture.
• Si vous ne voyez pas l'image après avoir appliqué <mask></mask>, assurez-vous que le contenu du masque n'est pas complètement noir. La luminosité de l'élément de masque détermine l'opacité de la figure finale. Vous pourrez voir à travers les parties plus brillantes, tandis que les parties les plus sombres masquent le contenu de l'image.

Vous pouvez vous entraîner à utiliser des masques et des éléments de culture dans ce stylo.

6.

Saviez-vous que SVG est un langage de balisage basé sur XML? Oui c'est le cas! L'espace de noms de SVG est défini sur la propriété

: xmlns

<svg height="700" viewbox="0 0 700 700" width="700"></svg>

Il y a beaucoup à savoir sur les espaces de noms dans XML, et il y a une bonne introduction au début du MDN. On peut dire que l'espace de noms fournit au navigateur le contexte indiquant qu'il est étiqueté avec SVG spécifique. L'idée est que lorsqu'il existe plusieurs types de XML dans le même fichier (comme SVG et XHTML), les espaces de noms aident à prévenir les conflits. Il s'agit d'un problème moins courant dans les navigateurs modernes, mais peut aider à expliquer les problèmes de rendu SVG stricts pour les navigateurs ou les navigateurs plus âgés comme Gecko lors de la définition des types de documents 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 si soutenir les navigateurs hérités est une priorité, c'est crucial - et, l'ajout, cela ne cause aucun dommage. De cette façon, lors de la définition de l'attribut

de l'élément, il n'y aura pas de conflit dans ces rares cas. xmlns

<svg height="700" viewbox="0 0 700 700" width="700"></svg>

Le même est vrai lors de l'utilisation de SVG en ligne dans CSS (par exemple, le définir comme image d'arrière-plan). Dans l'exemple suivant, après une vérification réussie, l'icône de vérification apparaît dans la zone d'entrée. L'apparition de CSS est la suivante:

<svg viewbox="0 0 700 700"></svg>

Lorsque nous supprimons l'espace de noms à l'intérieur du SVG dans la propriété d'arrière-plan, l'image disparaît:

Un autre préfixe d'espace de noms commun est xlink:href. Nous l'utilisons souvent lors du référence à d'autres parties de SVG, telles que des motifs, des filtres, des animations ou des gradients. Il est recommandé de commencer à le remplacer par href, car l'autre a été déprécié depuis SVG 2, mais peut avoir des problèmes de compatibilité avec des navigateurs plus âgés. Dans ce cas, nous pouvons utiliser les deux. N'oubliez pas que si vous utilisez toujours xlink:href, incluez l'espace de noms xmlns:xlink="http://www.w3.org/1999/xlink".

Améliorez vos compétences en SVG!

Si vous vous retrouvez à résoudre un SVG en ligne mal rendu, j'espère que ces conseils pourront vous aider à gagner beaucoup de temps. Ce ne sont que les choses que je recherche. Peut-être que vous avez différents drapeaux rouges auxquels faire attention - si oui, faites-le moi savoir dans les commentaires!

Plus important encore, il vaut la peine d'avoir une compréhension de base des différentes façons d'utiliser SVG. Les défis de codepen incluent souvent SVG et offrent de bonnes pratiques. Voici quelques ressources supplémentaires pour améliorer votre niveau:

• en utilisant SVG, CSS3 et HTML5 (Amelia Bellamy-Royds, Kurt Cagle, Dudley Storey) - Je pense que c'est la Bible SVG.
• Lea verou possède une vaste connaissance SVG et a donné des conférences sur ce sujet à plusieurs reprises (comme cette vidéo de Frontend United 2019).
• Animation SVG (Sarah Drasner)
• SVG Essentials (Amelia Bellamy-Royds, J. David Eisenberg)
• SVG pratique (Chris Coyier)

Je suggère de prêter attention à certaines excellentes personnes liées à SVG:

• Sara Soueidan
• Carl Schoof
• Cassie Evans
• Val Head
• ana tudor

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!