À propos

SVG Sketcher transforme des illustrations vectorielles nettes en quelque chose qui paraît dessiné à la main. Il s'adresse aux développeurs et designers qui veulent une icône croquée, un diagramme au style brut ou un logo animé dessiné à la main sans ouvrir un logiciel d'illustration ni retoucher des données de tracé - et aux monteurs vidéo qui ont besoin d'un élément dessiné à la main à incruster sur des images.

Tout se passe dans votre navigateur

Il n'y a aucun backend. Votre SVG est analysé, croqué et exporté par du JavaScript sur votre machine - rien n'est envoyé, stocké ni journalisé. Vous pouvez le vérifier en ouvrant l'onglet réseau de votre navigateur : après le chargement de la page, convertir un fichier ne fait aucune requête.

Ce qu'il prend en charge

• path, rect (arrondis compris), circle, ellipse, line, polygon et polyline
• Les groupes <g> imbriqués, avec la transformation cumulée de chaque élément appliquée
• Le texte, converti en vrais contours depuis le fichier de police plutôt que rendu comme texte - parmi un jeu de polices libres fournies, ou un TTF/OTF que vous importez (et qui reste dans votre navigateur), avec interlettrage réglable
• Un style de lettre ligne simple, en alternative au suivi du contour - soit l'alphabet de gravure Hershey (chaque caractère tracé d'un seul trait de plume), soit une sans-serif d'épaisseur régulière dont la ligne médiane est extraite des formes de lettre
• Le dessin à main levée à la souris, au doigt ou au stylet, croqué et animé comme toute autre illustration
• L'export en SVG, composant React, animation CSS, JSON Lottie, GIF animé, ou vidéo avec un fond vert derrière

Limites connues

Pour être clair sur ce qu'il ne fait pas :

• Le <text> vivant dans un SVG collé est ignoré. Le croquer nécessiterait le fichier de police exact, que la page n'a pas. Utilisez l'onglet Saisir du texte, ou convertissez le texte en contours dans votre éditeur d'abord.
• Les polices propriétaires ne sont pas fournies. Arial, Helvetica Neue et consorts ne peuvent pas être redistribuées, donc l'onglet Saisir du texte fournit des polices libres (y compris des équivalents compatibles comme Arimo pour Arial) et vous laisse importer le vrai fichier si vous l'avez. Fournir toutes les Google Fonts, ou les charger à l'exécution, est exclu - la seconde option montrerait votre IP à Google.
• Le style ligne simple est difficile sur les polices. Une police ordinaire stocke chaque lettre comme une forme pleine, pas une ligne médiane, donc le mode ligne simple utilise soit des polices dessinées en traits dès le départ (le jeu Hershey), soit trace la ligne médiane d'une police à contours. Le traçage n'est fiable que pour les sans-serif d'épaisseur régulière ; les polices serif, display et à fort contraste se squelettisent en bouillie et ne sont pas proposées.
• Les références <use> sont ignorées. Aplatissez-les avant de coller.
• Les remplissages ne sont pas croqués. L'outil dessine des contours ; il ne hachure pas encore les zones remplies.
• Les illustrations très complexes ralentissent. L'échantillonnage est proportionnel à la longueur totale des tracés, donc une carte détaillée avec des milliers de segments prendra un moment.
• L'export vidéo n'a pas de transparence. Aucun codec vidéo qu'un navigateur peut enregistrer ne porte de canal alpha, d'où un fond de couleur d'incrustation plate à retirer dans votre logiciel de montage. Il enregistre aussi en temps réel, donc un long clip prend autant de temps qu'il en dure, et Safari pourrait ne rien enregistrer.

Coût

L'outil est gratuit. Les publicités couvrent l'hébergement. Il n'y a pas de compte, pas d'offre payante, et pas de limite d'import au-delà de ce que votre navigateur peut gérer.

Retour à l'outil