SVG Viewer — outil pour consulter, modifier et optimiser des fichiers SVG

 (svgviewer.dev)
4 points par GN⁺ 2024-04-28 | 1 commentaires | Partager sur WhatsApp
  • SVG Viewer est un outil web qui permet, après avoir importé un SVG, de gérer l’aperçu et l’édition du code sur un même écran
  • Il permet d’effectuer directement dans le navigateur des opérations d’édition de base comme la rotation, le retournement horizontal/vertical, le redimensionnement ou la mise en forme du code
  • L’exemple d’optimisation montre une réduction de la taille du SVG de 578 bytes à 493 bytes, soit -15 %
  • En plus du téléchargement du SVG, il propose aussi des conversions vers React, React Native, PNG et Data URI
  • La liste d’icônes et les actions d’import, de copie, de téléchargement et de partage se trouvent sur le même écran, ce qui facilite le passage de la vérification d’un SVG à sa réutilisation

Édition et optimisation de SVG

  • SVG Viewer est un outil web permettant de consulter, modifier et optimiser des fichiers SVG
  • L’écran d’édition affiche à la fois le code SVG et l’aperçu, afin de vérifier immédiatement le résultat des modifications du code

  • Opérations proposées

    • Rotate
    • Flip Y
    • Flip X
    • Change dimensions
    • Optimize
    • Prettify
    • Clear
    • L’exemple de SVG est affiché en 400px x 400px, et le code <svg> apparaît dans la zone d’édition du code
    • L’état de l’optimisation est indiqué comme 578 bytes → 493 bytes, -15 %

Import et export

  • Les opérations sur les fichiers comprennent Upload, Copy, Download et Share
  • Cibles d’export ou de conversion :
  • L’écran affiche plusieurs éléments d’icônes SVG, dont eye-close, gps, minus, lock-line, email, battery, document, comment, home, search et wifi, ainsi que Load More SVGs
  • Des liens vers les retours, les conditions d’utilisation et la politique de confidentialité sont également proposés

À lire aussi

1 commentaires

 
GN⁺ 2024-04-28
Avis sur Hacker News

  • Parmi les outils SVG web que j’utilise souvent, il y a https://jakearchibald.github.io/svgomg/. C’est un outil d’optimisation SVG dont les réglages peuvent être ajustés très finement

  • Je ne m’attendais pas à ce que cela fasse autant parler sur Hacker News un week-end. Nous sommes une petite entreprise à Vancouver, en Colombie-Britannique, et nous créons des outils logiciels : https://www.checkersoftware.ca/
    Si vous avez des questions, dites-le-moi

    • Je me demande si vous prévoyez de garder cette webapp financée par la publicité, ou si une version pro payante avec des fonctionnalités supplémentaires est prévue dans un avenir proche
    • La plupart des exemples contiennent beaucoup de path avec de longues séries de nombres, ce qui rend difficile de voir immédiatement quel path correspond à quelle forme dans l’image.
      Je me demande s’il serait possible, dans l’éditeur, de modifier temporairement la couleur ou le contour du tracé quand on survole le code, et d’avoir un comportement similaire pour la sélection de texte
    • Je ne suis pas développeur React, donc je demande par curiosité : à quoi sert la fonctionnalité d’export SVG vers React ?
      Pourquoi un développeur React utiliserait-il l’export React plutôt que d’intégrer le SVG en inline ?
    • J’utilise toujours cet outil quand je travaille sur des icônes

  • Je l’ai un peu essayé, et cela semble très utile pour le jour où je voudrai résoudre les petits problèmes que je rencontre avec les SVG que j’utilise. L’interface est facile à comprendre et le retour sur les changements est clair, donc je l’ai immédiatement ajouté à mes favoris.
    Certains SVG avaient un problème : pendant le chargement, ils élargissaient momentanément la page, puis prenaient leur taille prévue un tout petit instant plus tard. J’ai essayé de modifier viewBox, width et height, sans réussir à corriger cela. Comment réduire cet étirement initial ?

    • Le flash d’un SVG avant application des styles peut être corrigé en définissant explicitement une viewBox (viewBox) et un viewport (width, height) : https://www.sarasoueidan.com/blog/svg-style-inheritance-and-...
    • Je me demande s’il est possible de convertir à la volée un SVG vers un autre format plus vite que le navigateur. Du point de vue d’un non-spécialiste, on dirait un comportement consistant à initialiser un bitmap à sa taille maximale, puis à parser le SVG dedans

  • C’est un excellent outil. Il regroupe beaucoup de fonctionnalités au même endroit. D’habitude j’utilise phpStorm ; il n’a pas d’optimisation à la SVGOMG, mais il nettoie bien le code.
    J’aimerais de meilleurs exemples pour commencer à éditer, et pas seulement avec des path, mais aussi avec d’autres formes de base. Une grille serait également utile.
    Par exemple, une icône de recherche peut être faite avec un circle et une line dans un viewBox bien défini. En plaçant l’origine au centre du cercle, il suffit d’avoir le rayon, sans valeurs x ni y, et on peut optimiser de façon presque absurde comme ça.
    Une icône de recherche classique est souvent écrasée en un path contenant des centaines de nombres façon NASA à six décimales. En réalité, un seul cercle défini avec des entiers suffit ; on n’a pas besoin du bazar exporté par Adobe Illustrator.
    Le SVG est un médium artistique, et je l’adore vraiment. Mais ni les artistes ni les développeurs ne semblent le voir ainsi. Du coup, la plupart des SVG ne rendent pas vraiment justice à l’esprit de ce qui est possible, et on voit mal qu’il s’agit de bien plus qu’un simple format de fichier

  • Le SVG est vraiment puissant. La semaine dernière, j’ai eu un problème avec une image transparente en parallaxe avec un filtre drop-shadow, qui s’affichait n’importe comment sur Mac Safari et iOS. La solution a été de créer le contour de l’image en SVG et d’appliquer l’ombre avec un filtre SVG utilisant feGaussianBlur.
    J’ai l’impression de n’avoir encore qu’effleuré ce qu’il est possible de faire avec SVG. J’utilisais svgomg pour l’optimisation, mais cet outil semble avoir pas mal de fonctionnalités utiles en plus

    • J’ai commencé avec un frontend desktop Qt/QML, puis je me suis demandé quelle proportion pouvait être réalisée simplement avec des compositions de type imagemap SVG.
      Lancer Jupyter avec des connexions de données et des outils SVG a été une expérience assez révélatrice
    • Ce ne serait probablement possible ni en pratique ni politiquement, mais ce serait vraiment bien que DWG, DXF, DGN soient remplacés par SVG. Cela n’a aucun sens que les plans 2D du secteur AEC soient inutilisables correctement dans la plupart des programmes

  • J’utilise Inkscape, et quand il manque quelque chose, j’utilise Xara Xtreme ou l’ancienne version gratuite pour Linux.
    Mais que signifie optimiser un SVG ?

    • Cela consiste à supprimer les informations inutiles. Inkscape ajoute beaucoup de choses. Par exemple, si vous exportez un SVG simple depuis Figma, puis que vous l’ouvrez et l’enregistrez avec Inkscape avant de comparer, vous verrez la différence

  • J’adore vraiment ce site et je l’ai utilisé un nombre incalculable de fois. Il est très utile pour comprendre des éléments SVG étranges et vérifier rapidement le résultat

  • Il y a quelques années, j’ai acheté BoxySVG sur Mac pour 10 dollars, et c’était un petit outil fiable.
    https://boxy-svg.com/

    • Il semble être passé maintenant à un modèle par abonnement. Comme je n’en ai besoin que quelques fois par an, à 10 dollars j’aurais préféré l’acheter et le garder. Monodraw, je l’ai acheté une fois et gardé comme ça ; je l’utilise de temps en temps, et c’est toujours un outil dont je suis satisfait
    • Boxy est recommandable comme éditeur SVG léger rapide pour faire des retouches approximatives

  • C’est ma ressource et mon outil préférés quand je manipule du SVG. J’ai beaucoup cherché, mais je n’ai rien trouvé de mieux