Cette nouvelle application Web progressive peut transformer des images en graphiques vectoriels SVG

Il existe deux catégories différentes d’images que vous voyez généralement sur le Web. Les images raster (telles que JPG, PNG, WebP, etc.) sont une série de pixels à une résolution fixe, tandis que les images vectorielles (telles que SVG) utilisent diverses lignes et formes. Les graphiques vectoriels sont populaires pour les logos et autres images simples, car ils ne sont pas terribles en haute résolution (ou lors d'un zoom avant), mais leur création à partir de zéro peut demander beaucoup de travail. Il existe désormais une application Web pratique pour créer des SVG à partir d'images standard: SVGcode.

SVGcode est une nouvelle application Web progressive créée par Thomas Steiner, un ingénieur en relations avec les développeurs travaillant chez Google (bien que SVGcode lui-même ne soit pas un produit Google). Une fois que vous l'ouvrez dans votre navigateur à

svgco.de, vous pouvez ouvrir une image depuis votre PC et elle sera automatiquement "dessinée" au format SVG. La plupart des images nécessiteront quelques ajustements pour créer un SVG d'apparence décente, mais il s'agit d'une application Web impressionnante et pourrait s'avérer utile si jamais vous souhaitez créer une version vectorielle plus propre d'un logo raster.

SVGcode est alimenté par certaines des API les plus récentes ajoutées par les navigateurs Web comme Chromium et Firefox. La fonctionnalité de dessin de base est basée sur le Projet Potrace, qui a été converti en code Web Assembly pour cette application Web. SVGCode peut copier le fichier terminé dans votre presse-papiers (avec le API du Presse-papiers asynchrone), s'affichent en option dans le gestionnaire de fichiers de votre PC lorsque vous cliquez avec le bouton droit sur une image (avec l'API de gestion de fichiers), et ouvrez/enregistrez des fichiers depuis votre appareil (à l'aide du API d'accès au système de fichiers). Il utilise même le nouveau API de superposition des contrôles de fenêtre pour masquer la barre de titre du système lorsqu'il est installé, ce qui lui donne l'impression d'être un peu plus comme une application native.

Vous pouvez en savoir plus sur le processus de développement du code SVG dans un article de blog sur le blog de développement Web de Google. Puisqu'il s'agit d'une PWA, vous pouvez utiliser et installer le code SVG sur n'importe quoi avec un navigateur Web moderne.