10 règles d'or pour les SVG réactifs

Sep 15, 2025

Comment

[dix] [dix] [dix]

[dix]

Les nombreux avantages de SVG - y compris des images vectorielles infiniment évolutives, des petites tailles de fichiers et une intégration directe avec le DOM - en font un ajustement naturel pour site Web adaptatif . Malgré la spécification SVG étant âgée de décennie, son soutien relativement récent dans de nombreux navigateurs et outils signifie qu'il existe encore un certain nombre d'astuces, de lacunes et de gotchas qui rattrapent même des concepteurs et des développeurs Web expérimentés.

[dix]

Ici, j'ai résumé le plus important de ceux-ci comme 10 règles d'or.

[dix]

01. Configurez vos outils correctement

Tout comme un artisan attaquant ses outils avant de commencer le travail, toute personne travaillant avec SVG doit définir leurs applications pour fournir un format de vecteur dans la méthode la plus efficace et optimisée possible. Il existe un certain nombre de paramètres à mettre en œuvre.

Premièrement, sauf s'il ya des raisons impérieuses de faire autrement, définissez des mesures sur des «pixels» dans votre outil de vecteur. Pendant que cela n'a pas d'importance pour SVG (qui mesurera le boîte de vue et des éléments joyeusement dans presque tous les systèmes de mesure), il est logique de développer le dessin SVG à l'aide d'unités CSS communes, plutôt que la défaillance d'impression de pouces; et cela rend également beaucoup plus facile d'ajouter @médias requêtes et autres interventions plus tard.

Ne faites pas la zone de la toile plus grande que nécessaire. Comme des images bitmap, tout «espace vide» dans le SVG ne sera pas utilisé et est mieux substitué par des marges CSS. Notez que de nombreux outils vectoriels, tels que croquis, «recadreront automatiquement la zone de toile à des éléments sélectionnés.

[dix]

Dans le même temps, ne recadrez pas la zone de la toile aux bords exacts d'éléments. L'antialiasing sera toujours appliquée au SVG et la coupe trop près peut également récolter l'antialiasing. Au lieu de cela, laissez au moins 2 px claire, partout où le bord de la toile s'approche d'un élément.

La réactivité et la performance sont étroitement liées, de sorte que la précision décimale ne soit pas supérieure à deux points. SVG ne pense pas aux entiers, un point vectoriel peut donc avoir une valeur de 1.45882721PX. Cette extrême précision est tout à fait inutile et ajoute uniquement à la taille du code de code et de la taille du fichier, il est donc préférable de le tronquer à ce stade.

De même, dessinez des formes de vecteur en utilisant aussi peu de points que possible. De nombreux nouveaux designers supposent que plus de points sont meilleurs, lorsque l'inverse est réellement vrai: quelques points bien placés, offrent une plus grande commande sur un élément tout en réduisant la taille du fichier.

Si vous avez reçu des fichiers vectoriels qui ne suivent pas cette règle, ne vous inquiétez pas - la plupart art vectoriel Les applications ont une option "Simplifier" que vous pouvez utiliser pour réduire le nombre de points dans un élément sans changer sa forme. Alternativement, pour un travail détaillé, je suggérerais un plugin comme Vectorscribe graphique astucieux.

02. Supprimer les attributs de hauteur et de largeur

La plupart des applications ajoutent beaucoup de code exclusif et inutile dans leur exportation SVG. Le seul code requis au début de la plupart des fichiers SVG est le suivant:

 & lt; svg xmlns = "http://www.w3.org/2000/svg" VIEWBOX = "0 0 500 500" & GT;
& lt;! - code SVG ici - & gt;
& lt; / svg & gt;

À nos fins, l'aspect le plus important est la suppression de la largeur et la taille attribue que la plupart des applications incluent automatiquement. Cela rend le SVG pleinement réactif dans les navigateurs modernes.

Si vous traitez beaucoup de SVGS ou si vous êtes pressé, vous n'avez pas besoin de terminer cette étape à la main. Au lieu de cela, vous pouvez suivre les suggestions énoncées dans la troisième règle d'or ...

03. Optimiser et minifier la sortie SVG

A combination of intelligent hand-editing and post-production optimisation can reduce SVG file sizes markedly — Une combinaison d'édition de la main intelligente et d'optimisation post-production peut réduire nettement la taille du fichier SVG

Quel que soit l'outil que vous utilisez pour créer votre contenu SVG, il est toujours intéressant de traiter sa sortie via un outil comme Svgomg , qui coupera nettement le code. En règle générale, vous pouvez économiser environ 20 à 80% en taille de fichier. Le même code peut être intégré localement comme une gorgée ou une tâche grogneuse .

04. Modifier le code pour IE

La règle 2 a mentionné que les SVG optimisés correctement sont entièrement réactifs dans les navigateurs modernes. C'est vrai si nous comptons Microsoft Edge comme navigateur moderne. Pour IE 9-11, nous avons quelques problèmes à résoudre. Si nous utilisons le SVG comme une image:

 & lt; img src = "Comptedown.svg alt =" compte à rebours "et GT;

Nous pouvons forcer IE9-11 pour afficher correctement l'image à l'aide du sélecteur d'attributs CSS:

 IMG [SRC $ = ". SVG"] {largeur: 100%;}

Les images SVG fonctionnent bien en production générale, mais ont une interactivité limitée: la plupart des navigateurs ignoreront l'interactivité et l'animation à l'intérieur d'un SVG placé sur une page en tant que . De plus, les images SVG sont une demande HTTP supplémentaire pour le navigateur.

Pour ces raisons et d'autres raisons, SVG est de plus en plus utilisé en ligne. Dans ce cas, le code SVG nécessite un peu plus de traitement pour IE:

 & lt; corps et gt;
...
& lt; svg xmlns = "http://www.w.w3.org/2000/svg" Vise VIEWBOX = "0 0 525 365" PRESERSERSERSERVELACTRATIO = "SLICE XMIDYMININ" & GT;

En plus de Conserver les proportions Attribut, c'est-à-dire qu'il faut un peu plus de guidage pour préserver la mise à l'échelle correcte de l'image: prenez la largeur du SVG ( 365 Dans ce cas), divisez-le par la hauteur ( 525 et multiplier le résultat de 100%. Cela deviendra le fond de rembourrage Valeur pour le SVG, "appuyer" Il est ouvert suffisamment dans IE pour afficher le SVG dans son rapport qualité-prix correct:

 & lt; corps et gt;
...
& lt; svg xmlns = "http://www.w3.org/2000/svg" VIEWBOX = "0 0 525 365"
préservationPlustratio = "tranche de xmidymin"
Style = "Largeur: 100%; Rembourrage-Fond: 69.52%; Hauteur: 1px; Overflow: Visible" & GT;

Notez que, afin de garder les choses concises et claires, les échantillons de code dans le reste de cet article n'incluent pas ces modifications. Amelia Bellamy-Royds a écrit un Excellent article sur Scaling SVG .

05. Considérez SVG pour le texte du héros

Using SVG for hero text means it will automatically scale in line with its container — L'utilisation de SVG pour le texte du héros signifie qu'il sera automatiquement échelle en ligne avec son conteneur.

Il n'y a actuellement aucune norme CSS pour le dimensionnement de texte à son conteneur. Il est possible de mettre à l'échelle du texte à l'aide des unités VW, mais qui nécessiteront presque toujours au moins deux interventions de requête multimédia pour «collecter» le texte à certaines limites de la fenêtre. Cependant, le texte SVG redimensionnera automatiquement à un conteneur:

 & lt; Header & GT;
& lt; svg xmlns = "http://www.w3.org/2000/svg" VIEWBOX = "0 0 285 80" & GT;
& lt; texte x = "0" y = "66" & gt; kauai & lt; / text & gt;
& lt; / svg & gt;
& lt; / Header & GT;

[dix]

Le CSS:

 En-tête SVG Text {
Poids de la police: 900; Taille de la police: 90px; remplir: bleu;
}

Garder la valeur de la valeur de SVG En ligne Conserve la valeur et permet au texte d'être stylé à l'aide de la police déjà intégrée dans la page. Voir ici pour plus d'informations.

06. Laissez la largeur et la hauteur en place pour des icônes progressives

A non-scaling-stroke line has been applied to this speech bubble so it will not change in width when the viewport is resized — Une ligne de course non échelle a été appliquée à cette bulle de dialogue afin qu'elle ne changera pas de largeur lorsque la fenêtre est redimensionnée.

Une exception à la règle 2 est des icônes et des petits logos, ce qui devrait conserver leur largeur et la taille attributs si vous voulez qu'ils soient progressivement améliorés:

 & lt; un href = "http://codepen.io" & gt;
    & lt; svg rôle = "img" aria-label = "Codepen" largeur = "50" Hauteur = "50" & gt;
        & lt; titre & gt; codepen & lt; / titre & gt;
        & lt; utiliser xlink: href = "# codepen" / & gt;
    & lt; / svg & gt;
& lt; / a & gt;
...
& lt; svg style = "Affichage: Aucun;" & gt;
    & lt; symbole id = "codepen" VIEWBOX = "0 0 50 50" & GT;
        & lt; chemin d = "..." / & gt;
    & lt; / symbole & gt;
& lt; / svg & gt;

Vous pouvez voir un exemple de cette technique en action ici .

Si nous simplifions seulement les icônes SVG avec CSS et que la feuille de style du site ne se charge pas, les icônes apparaîtront à la taille par défaut d'un élément remplacé: 300PX x 150px. En gardant la hauteur et la largeur en tant qu'attributs, nous pouvons les former à la taille tactile raisonnable la plus proche par défaut et utiliser notre CSS pour améliorer la manière dont ils sont présentés.

07. Utilisez des effets vectoriels pour garder les cheveux minces

Par défaut, SVG échoue tout avec la fenêtre, y compris l'épaisseur de course. Habituellement, cela fonctionne bien, mais dans certains cas, des diagrammes et des traits appliqués comme des effets sur l'extérieur du texte en particulier - vous voudrez peut-être garder des coups de même épaisseur, peu importe la taille du dessin. C'est le domaine du peu connu effet vectorielle propriété, qui peut être appliquée comme attribut de présentation ou en CSS:

 Chemin {
    remplir: #fff; AVC: # 111;
    largeur de course: 2;
    Effet vectoriel: AVC de non-échelle;
}

Jeter un coup d'œil à un exemple complet de cette technique .

08. Rappelez-vous des bitmaps

De nombreux développeurs supposent que SVG ne peut utiliser que des vecteurs, mais des JPEG et des PNG peuvent également être appliqués à un dessin SVG. Et si longtemps que vous avez suivi mes règles jusqu'à présent, ces images seront réagissant lorsque vous ajoutez un bitmap via le étiqueter:

 & lt; largeur de l'image = "1024" hauteur = "768" xlink: href = "lac-louise.jpg" x = "1300" y = "150" Rôle = "image" TITRE = "CROWSNEST PASS" & GT; & lt; / image & gt;

09. Envisager des solutions adaptatives

[dix] [dix]

Le logo classique Coca-Cola rendu à différentes tailles adaptatives

Faire des choses à faire "squish" n'est qu'une partie du design réactif. Ce que RWD est à propos, dans le sens approprié de la conception adaptative, présente un contenu approprié à toutes les tailles de la viewport.

Cela peut être atteint de différentes manières. Resportelogos.fr fournit une série d'exemples utilisant des sprites SVG, mais je préfère intégrer les requêtes de média dans le SVG pour créer ce que j'appelle «modules de marque». Cette approche me permet d'ajouter, de supprimer et de modifier la visibilité des composants. En savoir plus sur les modules de marque adaptative Dans mon article .

Cette même technique peut être utilisée pour des diagrammes, des illustrations, des cartes et plus encore. Dans les modules les plus simples, le CSS lui-même peut être écrit à l'intérieur du SVG, ce qui la rend utilisable partout, comme indiqué dans la règle précédente.

10. Intégrer les requêtes multimédias dans SVG

Beaucoup de gens ne savent pas que les requêtes médiatiques CSS peuvent être écrites à l'intérieur de SVG lui-même:

 & lt; svg xmlns = "http://www.w3.org/2000/svg" VIEWBOX = "14 82 272 139" & GT;
& lt; defs & gt;
& lt; style & gt;
svg g {transition: 1s; }
@media tous et (max-largeur: 90rem) {
#dink, #coke {opacité: 0; }
}
& lt; / style & gt;
& lt; / defs & gt;
& lt; g id = "coca-cola" & gt;
& lt; chemin d = "m109.6 ... & gt;

Il est important de noter que la requête des médias ne peut "voir" que l'élément qu'il est à l'intérieur de: c'est-à-dire que toute mesure concerne l'élément lui-même, pas la page. Un inconvénient potentiel de cette approche est que la zone de la toile du SVG restera toujours la même, par rapport aux éléments à l'intérieur.

Cela peut entraîner de très petits éléments à de petites tailles de visualisation, encadrées à l'intérieur d'une zone de toile relativement grande. Il y a plusieurs solutions à cela, y compris redimensionner la zone de vie et Structure des éléments pour compenser .

Conclusion

L'évolutivité infinie de SVG est son plus grand atout, mais une caractéristique qui est encore quelque peu désignée par les navigateurs et les éditeurs de graphiques vectoriels. En intégrant ces directives dans votre flux de production et en les communiquant à d'autres personnes de votre équipe, vous pouvez créer un SVG sensible sans heurts pour le Web, ce qui fait partie des actifs que vous utilisez dans le développement chaque jour.

Cet article est apparu à l'origine dans magazine net numéro 283; Achetez-le ici !

Articles Liés:

12 outils de test de code incontournables
Aiguisez vos compétences de croquis
Supercharger des animations SVG avec GSAP

[dix] [dix]

[dix]

10 règles d'or pour les SVG réactifs

01. Configurez vos outils correctement

02. Supprimer les attributs de hauteur et de largeur

03. Optimiser et minifier la sortie SVG

04. Modifier le code pour IE

05. Considérez SVG pour le texte du héros

06. Laissez la largeur et la hauteur en place pour des icônes progressives

07. Utilisez des effets vectoriels pour garder les cheveux minces

08. Rappelez-vous des bitmaps

09. Envisager des solutions adaptatives

10. Intégrer les requêtes multimédias dans SVG

Conclusion

Comment - Most Popular Articles

Figure Dessin: Guide de débutant

Comment redimensionner une image dans Photoshop

Comment faire et utiliser un mahlstick pour la peinture

Convertissez des jeux Flash en HTML5

Comment se déplacer entre Daz Studio et Zbrush

Créer une douche de météore dans 3Ds max

Age une photo dans Photoshop CC

Créez une sensation peintre dans votre art numérique

Catégories