Caractéristiques Principales
- Transformation exceptionnelle de SVG en PNG
- Transparence préservée dans toutes les sorties PNG
- Options de taille et de résolution de sortie personnalisées
- Capacités de conversion par lots efficaces
- Conception conviviale et simple
Comprendre les Graphiques Vectoriels Évolutifs (SVG)
Le SVG (Scalable Vector Graphics) est un format de fichier vectoriel prédominant pour les graphiques, connu pour son support d'animation intégré. Comme les images SVG sont basées sur XML, elles sont interrogeables, indexables, scriptables et compressibles. De plus, elles sont modifiables via des éditeurs de texte ou des programmes de conception vectorielle professionnels comme Adobe Illustrator ou Inkscape. Les images SVG excellent par leur indépendance de la résolution, ce qui signifie qu'elles peuvent être mises à l'échelle sans perdre leur clarté, et animées à l'aide de JavaScript, ce qui les rend idéales pour les logos, les icônes et les animations simples. Cependant, gardez à l'esprit que si les navigateurs modernes gèrent nativement les SVG, leur prise en charge sur toutes les plateformes peut ne pas être universelle et ils ne sont pas idéaux pour les images très détaillées comme les photographies.
Comprendre les Graphiques Réseau Portables (PNG)
Le PNG (Portable Network Graphics) est un format d'image matricielle recherché en raison de sa qualité d'image exceptionnelle et de sa grande polyvalence. Les PNG bénéficient d'une compression de données sans perte, garantissant que leur qualité reste constante après compression. Ils sont construits à partir de pixels au lieu de vecteurs, ce qui signifie qu'ils ne peuvent pas être mis à l'échelle à l'infini, mais offrent des options de transparence qui les rendent adaptés aux arrière-plans clairs. Ils sont largement pris en charge sur diverses plateformes, contrairement aux SVG qui ont certaines restrictions. Enfin, bien que leur flexibilité soit notable, les PNG entraînent souvent des fichiers de plus grande taille et manquent de l'évolutivité à l'impression du vecteur.
SVG vs PNG : Faire le bon choix
Aucun format n'est d'emblée supérieur car leurs priorités de conception diffèrent. Alors que les graphistes privilégient souvent le PNG pour ses propriétés polyvalentes, le SVG est un choix préféré pour les icônes, les logos, les conceptions graphiques simples et les polices en raison de son évolutivité et de ses caractéristiques uniques. En résumé, le SVG est inégalé lorsque l'évolutivité est la clé, tandis que le PNG brille dans les cas nécessitant plus de flexibilité et de précision d'image.
Système de Coordonnées SVG
Le SVG utilise un système de coordonnées bidimensionnel où l'axe des x augmente vers la droite et l'axe des y augmente vers le bas. L'origine (0,0) est située dans le coin supérieur gauche de la toile SVG.
Syntaxe SVG
La syntaxe SVG (Scalable Vector Graphics) est basée sur XML, avec des règles spécifiques pour décrire les graphiques vectoriels.
Structures SVG de base
- Élément : Blocs de construction de base du SVG, définissant des formes, du texte et des images.
- Attribut : Propriétés d'un élément, contrôlant son apparence et son comportement.
- Groupe : Utilisé pour regrouper des éléments connexes, facilitant l'application de transformations et de styles communs.
Types de données SVG courants
- Chemin : Une séquence de commandes de dessin qui définissent des formes complexes.
- Rectangle : Une forme rectangulaire avec des attributs pour la largeur, la hauteur et la position.
- Cercle : Une forme de cercle définie par son centre et son rayon.
- Ellipse : Une forme elliptique définie par son centre et ses rayons.
- Ligne : Une ligne droite reliant deux points.
- Polyligne : Une série connectée de lignes droites.
- Polygone : Une forme fermée composée de segments de ligne droite.
- Texte : Utilisé pour afficher du contenu textuel à l'écran.
- Image : Intégrer des images matricielles dans le SVG.
Attributs SVG courants
- fill : Spécifie la couleur de remplissage d'une forme.
- stroke : Spécifie la couleur du contour d'une forme.
- stroke-width : Spécifie l'épaisseur du contour d'une forme.
- opacity : Spécifie la transparence d'un élément.
- width et height : Spécifie les dimensions d'un élément.
- x et y : Spécifie la position d'un élément.
- d : Utilisé pour l'élément de chemin afin de définir des commandes de forme.