Qu'est-ce que SVG? Votre guide des fichiers SVG

SVG: Avantages et applications des graphiques vectoriels évolutifs

SVG (Scalable Vector Graphics) est un format de fichier image unique qui combine la forme, les lignes, les courbes, le texte et les informations de couleur pour construire des images. Contrairement aux formats basés sur Pixels tels que JPG, PNG et GIF, les fichiers SVG ressemblent davantage à une "recette" pour créer des graphiques, ce qui leur permet de zoomer sans perdre la qualité d'image ni augmenter la taille du fichier.

Les fichiers SVG présentent de nombreux avantages, notamment l'évolutivité et la réactivité, la programmabilité et l'interactivité, l'accessibilité et les performances. Ils peuvent être utilisés à diverses fins, notamment des illustrations, des graphiques, des logos, des icônes, des animations, des graphiques interactifs, des infographies, des cartes, des effets spéciaux et des interfaces et applications de construction.

Les fichiers SVG peuvent être créés à l'aide d'applications graphiques vectorielles telles que Figma, Adobe Illustrator, Boxy SVG et SVG Editor. Ils sont compatibles avec tous les navigateurs Web modernes, peuvent être utilisés pour l'impression et peuvent être optimisés pour de meilleures performances. Cependant, le client de messagerie ne prend pas en charge SVG, donc l'utilisation d'images raster traditionnelles dans les e-mails est généralement plus sûre.

Qu'est-ce que SVG?

SVG (Graphiques vectoriels évolutifs) est un format de fichier image qui combine des informations de forme, de lignes, de texte et de couleur pour construire des images. Les formats d'image les plus couramment utilisés (tels que JPG, PNG et GIF) enregistrent les données d'image comme une permutation spécifique de pixels, tandis que les fichiers SVG ressemblent davantage à une "description écrite" ou à "recette" pour créer un graphisme donné. Cela signifie que SVG (comme une bonne recette) peut être agrandi sans perdre la qualité d'image et sans augmenter la taille du fichier. Le code SVG est un langage textuel et lisible par l'homme avec une nature similaire à HTML ou XML.

À quoi ressemble le fichier SVG?

Ouvrez un fichier SVG très simple dans un navigateur Web moderne et vous verrez ce qui suit:

Ouvrez le même fichier SVG dans l'éditeur de texte et vous verrez ce qui suit:

<code class="language-xml"><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="80" stroke-width="4" stroke="#000" fill="yellow"></circle>
</svg></code>

Comme le montre l'exemple, un document SVG n'est rien de plus qu'un fichier texte brut décrivant des formes, des lignes, des courbes, des couleurs et du texte. Ils peuvent être lus et édités par des humains et peuvent être exploités via CSS ou JavaScript. Cela offre à SVG une flexibilité et une polyvalence qui ne peuvent pas être adaptées aux formats d'image PNG, GIF ou JPG traditionnels.

Comment créer ou modifier un fichier SVG?

Bien qu'il soit possible de créer des images SVG simples à l'aide de n'importe quel éditeur de texte de base (comme l'exemple ci-dessus), la plupart des SVG sont créés à l'aide d'applications graphiques vectorielles modernes. Les éditeurs SVG populaires incluent:

• Figma
• Adobe Illustrator
• SVG boxy (pas cher)
• éditeur SVG (gratuit)

Ce qui suit est un exemple d'image SVG typique. Cette illustration de 60KB peut être utilisée dans presque tous les environnements en ligne. En tant que vecteur, nous pouvons être sûrs qu'il évoluera immédiatement pour répondre aux exigences de la fenêtre ou de l'élément.

SVG est né dans les années 1990. Il avait initialement un mauvais soutien et a été négligé pendant une grande partie des années 2000, mais les choses ont changé depuis le milieu des années 2010. Tous les navigateurs Web modernes rendent désormais parfaitement SVG et toutes les applications de dessin professionnelles proposent des options d'exportation SVG. Alors que les graphiques traditionnels raster tels que JPG et PNG sont encore plus adaptés aux images photo, SVG est bien adapté pour répondre aux besoins du développement Web d'aujourd'hui pour l'évolutivité, la réactivité, l'interactivité, la programmabilité, les performances et l'accessibilité.

Quelle est la différence entre la toile SVG et HTML5?

Ces deux technologies sont très différentes, mais cette question est souvent posée. Nous décomposons les utilisations, les avantages et les inconvénients de chaque technologie en SVG et en toile afin que vous puissiez faire le bon choix à chaque fois.

Quels sont les avantages de SVG?

L'avantage de SVG est qu'il peut résoudre bon nombre des problèmes les plus difficiles du développement Web moderne. Jetons un coup d'œil à certaines de ces questions.

1. Évolutivité et réactivité

Si vous y pensez attentivement, les formes, les chemins et les textes qui composent le logo Nike sont les mêmes lorsque vous le représentez sur une carte de visite standard ou sur un logo de bâtiment géant de 20 pieds de haut. Seule l'unité de mesure a changé. SVG vous permet de construire des images que vous pouvez être sûr que ces images sont nettes et nettes à n'importe quelle taille. En revanche, les formats basés sur des pixels tels que GIF, JPG et PNG sont comme utiliser des briques LEGO. Si vous voulez des tailles et des détails plus grands, la seule solution consiste à ajouter plus de blocs. Bien que diverses techniques d'imagerie réactives se soient avérées précieuses pour les graphiques de pixels, ils ne peuvent jamais vraiment rivaliser avec la capacité du SVG à évoluer infiniment.

2. Programmabilité et interactivité

Étant donné que les images SVG sont composées de composants distincts (formes, lignes, courbes et texte), nous sommes toujours libres d'utiliser des scripts et des comportements pour localiser ces composants. Diverses animations et interactions peuvent être ajoutées aux graphiques SVG en ligne via CSS et / ou JavaScript. Il n'y a aucun moyen équivalent de localiser les éléments d'image dans JPG ou PNG.

3. Accessibilité

Étant donné que les fichiers SVG sont basés sur du texte, les informations contenues sont toujours plus faciles à rechercher et à indexer que ce qui est dans une image de pixel. Cela signifie-t-il que le SVG lui-même est accessible? Non. Les SVG insuffisamment préparés sont aussi inutiles que les PNG marqués de manière inappropriée. Cependant, les données du graphique SVG sont plus faciles à extraire par les lecteurs d'écran, les moteurs de recherche et d'autres services de consommation de texte que les graphiques JPG équivalents.

4. Performance

L'un des aspects les plus importants qui affectent les performances du réseau est la taille du fichier utilisée sur la page Web. Si vous êtes soigneusement préparé, vous pouvez utiliser des fichiers SVG relativement petits pour afficher des images grandes et complexes.

Quelles sont les meilleures utilisations pour SVG?

SVG a de nombreux cas d'utilisation pratiques. Discutons des plus importants.

• Illustrations et graphiques

Tout dessin traditionnel adapté à la fabrication avec des stylos et des crayons doit être parfaitement converti au format SVG. SVG est souvent utilisé pour fournir des motifs imprimés en 3D, des illustrations Etsy, des conceptions de t-shirts, des modèles de broderie et même des documents de planification de mariage.

• logo et icônes

Les logos et les icônes doivent être nets et nets de toute taille - que ce soit la taille du bouton ou la taille du panneau d'affichage - cela les rend idéaux pour les SVG. De plus, les icônes SVG sont plus faciles à accéder et plus faciles à localiser.

• Animation

Vous pouvez créer des animations attrayantes avec des graphiques SVG, y compris des effets de dessin de ligne cool. En fait, le code SVG peut interagir avec les animations CSS ainsi que les bibliothèques JavaScript et leurs propres fonctionnalités d'animation SMIL intégrées.

• Interactivité (graphiques, graphiques, infographies, cartes)

SVG peut être utilisé pour tracer les données et mettre à jour les données dynamiquement en fonction des actions utilisateur ou d'autres événements. Voir l'infographie SVG interactive et la carte interactive de la route interactive SVG.

• Effets spéciaux

SVG peut être utilisé pour obtenir de nombreux effets en temps réel, notamment la déformation de la forme ou les effets d'adhérence organique.

• Créer des interfaces et des applications

SVG vous permet de créer des composants d'interface complexes que vous pouvez intégrer avec HTML5, des applications Web et des applications Internet riches (RIA).

Résumé

Maintenant, vous savez ce qu'est SVG et pourquoi ils sont si bons pour le Web. Ensuite, je vous suggère de consulter l'article de Craig sur diverses méthodes d'utilisation de CSS avec SVG, et comment inclure et opérer sur SVG dans une page Web. Ou, si vous voulez creuser plus profondément, consultez le livre Practical SVG de Chris Coyier.

(Ce qui suit est la partie FAQ, qui a été réécrite et rationalisée en fonction du texte d'origine pour éviter la duplication)

Des questions fréquemment posées sur SVG (FAQ)

• Quels sont les avantages de SVG par rapport à d'autres formats d'image tels que JPEG ou PNG? SVG présente les avantages de la non-pertinence de la résolution, généralement des fichiers plus petits et le fonctionnement via CSS et JavaScript.

• Les fichiers SVG peuvent-ils être animés? Oui, il prend en charge trois méthodes d'animation: SMIL, CSS et JavaScript.

• Comment créer une image SVG? Vous pouvez utiliser un éditeur graphique vectoriel tel qu'Adobe Illustrator ou Inkscape ou écrire directement du code SVG.

• Les fichiers SVG sont-ils compatibles avec tous les navigateurs Web? compatible avec tous les navigateurs modernes, mais les versions plus anciennes de IE peuvent ne pas la soutenir.

• Les images SVG peuvent-elles être utilisées pour l'impression? Oui, mais tous les magasins imprimés ne le prennent pas en charge.

• Comment optimiser les fichiers SVG pour de meilleures performances? peut réduire le code SVG, simplifier les formes, etc.

• Le fichier SVG peut-il contenir des hyperliens? Oui.

• Les moteurs de recherche peuvent-ils indexer les images SVG? Oui, mais un texte alternatif approprié est requis.

• Les fichiers SVG peuvent-ils contenir des images bitmap? Oui, mais cela augmentera la taille du fichier.

• Les images SVG peuvent-elles être utilisées dans les e-mails? Non recommandé car les clients de messagerie ne prennent pas en charge SVG.

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!