Visionneuse SVG - outil de consultation, d’édition et d’optimisation de fichiers SVG

Analyse d’un fichier image SVG

• Fichier image SVG de 400 px de large sur 400 px de haut
• Structure de base :
  • Un rectangle tout à l’extérieur avec width="124" et height="124"
  • Coins arrondis via l’attribut rx="24"
  • Rempli d’un fond orange via l’attribut fill="#F97316"
• Formes principales :
  • Une forme polygonale blanche est dessinée avec la balise <path>
    • L’attribut d contient les informations de coordonnées du tracé
    • Remplie en blanc avec fill="white"
  • Un cercle noir est dessiné avec la balise <circle>
    • Position et taille définies par cx="63.2109" cy="37.5391" r="18.1641"
    • Rempli en noir avec fill="black"
  • Un rectangle semi-transparent est dessiné avec une rotation de 45 degrés
    • Transparence définie par opacity="0.4"
    • Rempli d’un orange clair avec fill="#FDBA74"
    • Transformation de rotation avec transform="rotate(-45 81.1328 80.7198)"
• Optimisation de la taille du fichier :
  • Réduction de 15 %, de 578 bytes à 493 bytes

L’avis de GN⁺

• Le SVG est un format graphique vectoriel qui a l’avantage de rester net sans perte lors du zoom ou du redimensionnement. En revanche, si la complexité augmente, la taille du fichier peut devenir plus importante que celle d’images bitmap comme le JPEG ou le PNG.
• La petite taille du fichier semble favorable à une vitesse de chargement rapide sur le web. Cependant, pour une illustration complexe, le PNG peut au contraire être plus avantageux.
• Il est impressionnant de voir comment diverses fonctionnalités comme rx, circle et rotate sont utilisées pour exprimer une sensation de volume malgré la simplicité de l’ensemble.
• L’utilisation du blanc et du noir sur un fond orange crée un contraste de couleurs qui améliore la lisibilité.
• Cela semble avoir été conçu pour un usage de type icône ou logo. La signification ou le rôle de la forme orange clair suscite la curiosité.

[GN⁺]

Commentaire Hacker News

• SVGOMG, un outil d’optimisation SVG, est présenté comme un autre outil SVG web utile
• Une petite entreprise basée à Vancouver, Checker Software, développe cet outil ainsi que plusieurs autres logiciels
• L’interface est facile à comprendre et fournit un retour clair sur les modifications, ce qui semble utile pour résoudre de petits problèmes qui surviennent lors de l’utilisation de SVG
  • Par exemple, le problème où un SVG s’agrandit brièvement puis rétrécit au chargement au lieu d’apparaître directement à la taille prévue
• Il existe un bug (?) amusant où la fonction de zoom du canevas peut aller jusqu’à l’infini
• SVG est un outil très puissant ; un exemple récent montre qu’un problème de rendu d’images transparentes en parallaxe avec filter: drop-shadow dans Safari et iOS a été résolu à l’aide de filtres SVG et de feGaussianBlur
• Dans un contexte où l’on a besoin de plus d’outils, et de meilleurs outils, pour SVG, l’arrivée de cet outil est bien accueillie
• Un avis note que lors de la génération de SVG à partir de texte, cet éditeur n’a pas réussi à analyser le contenu généré, alors que le visualiseur SVG de CodeBeautify a bien fonctionné
• Ces petits outils sont considérés comme correspondant tout à fait à l’esprit de Hacker News (HN)