web-dev-qa-db-fra.com

Existe-t-il un outil pour créer des chemins SVG à partir d'un fichier SVG?

quelqu'un connaît-il un outil capable de convertir un fichier SVG en un chemin HTML 5 SVG? tu sais le d="M 0 0 L 20 134 L 233 24 Z" fill="#99dd79" partie?

Je me dirige ici: tilisez Adobe Illustrator pour créer un chemin SVG en utilisant les commandes "déplacer vers"

Mais pas sûr. Est-ce que cela signifie qu'Illustrator peut prendre n'importe quelle ligne et l'enregistrer sous un chemin SVG?

Remarque: Oui, il y a inkscape, mais je recherche une prise en charge du dégradé et du masquage, si cela est possible. J'aimerais pouvoir utiliser les fichiers .ai et les exporter à l'aide d'illustrator ou d'Acrobat ou de quelque chose ... y a-t-il quelque chose? Ou est-il intégré à Illustrator ou Acrobat en tant que format de sortie?

html5svgadobe-illustrator
54
tim

Ouvrez le SVG avec votre éditeur de texte. Si vous avez un peu de chance, le fichier contiendra quelque chose comme:

<path d="M52.52,26.064c-1.612,0-3.149,0.336-4.544,0.939L43.179,15.89c-0.122-0.283-0.337-0.484-0.58-0.637  c-0.212-0.147-0.459-0.252-0.738-0.252h-8.897c-0.743,0-1.347,0.603-1.347,1.347c0,0.742,0.604,1.345,1.347,1.345h6.823  c0.331,0.018,1.022,0.139,1.319,0.825l0.54,1.247l0,0L41.747,20c0.099,0.291,0.139,0.749-0.604,0.749H22.428  c-0.857,0-1.262-0.451-1.434-0.732l-0.11-0.221v-0.003l-0.552-1.092c0,0,0,0,0-0.001l-0.006-0.011l-0.101-0.2l-0.012-0.002  l-0.225-0.405c-0.049-0.128-0.031-0.337,0.65-0.337h2.601c0,0,1.528,0.127,1.57-1.274c0.021-0.722-0.487-1.464-1.166-1.464  c-0.68,0-9.149,0-9.149,0s-1.464-0.17-1.549,1.369c0,0.688,0.571,1.369,1.379,1.369c0.295,0,0.7-0.003,1.091-0.007  c0.512,0.014,1.389,0.121,1.677,0.679l0,0l0.117,0.219c0.287,0.564,0.751,1.473,1.313,2.574c0.04,0.078,0.083,0.166,0.126,0.246  c0.107,0.285,0.188,0.807-0.208,1.483l-2.403,4.082c-1.397-0.606-2.937-0.947-4.559-0.947c-6.329,0-11.463,5.131-11.463,11.462  S5.15,48.999,11.479,48.999c5.565,0,10.201-3.968,11.243-9.227l5.767,0.478c0.235,0.02,0.453-0.04,0.654-0.127  c0.254-0.043,0.507-0.128,0.713-0.311l13.976-12.276c0.192-0.164,0.874-0.679,1.151-0.039l0.446,1.035  c-2.659,2.099-4.372,5.343-4.372,8.995c0,6.329,5.131,11.461,11.462,11.461c6.329,0,11.464-5.132,11.464-11.461  C63.983,31.196,58.849,26.064,52.52,26.064z M11.479,46.756c-4.893,0-8.861-3.968-8.861-8.861s3.969-8.859,8.861-8.859  c1.073,0,2.098,0.201,3.051,0.551l-4.178,7.098c-0.119,0.202-0.167,0.418-0.183,0.633c-0.003,0.022-0.015,0.036-0.016,0.054  c-0.007,0.091,0.02,0.172,0.03,0.258c0.008,0.054,0.004,0.105,0.018,0.158c0.132,0.559,0.592,1,1.193,1.05l8.782,0.727  C19.397,43.655,15.802,46.756,11.479,46.756z M15.169,36.423c-0.003-0.002-0.003-0.002-0.006-0.002  c-1.326-0.109-0.482-1.621-0.436-1.704l2.224-3.78c1.801,1.418,3.037,3.515,3.32,5.908L15.169,36.423z M25.607,37.285l-2.688-0.223  c-0.144-3.521-1.87-6.626-4.493-8.629l1.085-1.842c0.938-1.593,1.756,0.001,1.756,0.001l0,0c1.772,3.48,3.65,7.169,4.745,9.331  C26.012,35.924,26.746,37.379,25.607,37.285z M43.249,24.273L30.78,35.225c0,0.002,0,0.002,0,0.002  c-1.464,1.285-2.177-0.104-2.188-0.127l-5.297-10.517l0,0c-0.471-0.936,0.41-1.062,0.805-1.073h17.926c0,0,1.232-0.012,1.354,0.267  v0.002C43.458,23.961,43.473,24.077,43.249,24.273z M52.52,46.745c-4.891,0-8.86-3.968-8.86-8.858c0-2.625,1.146-4.976,2.962-6.599  l2.232,5.174c0.421,0.977,0.871,1.061,0.978,1.065h0.023h1.674c0.9,0,0.592-0.913,0.473-1.199l-2.862-6.631  c1.043-0.43,2.184-0.672,3.381-0.672c4.891,0,8.861,3.967,8.861,8.861C61.381,42.777,57.41,46.745,52.52,46.745z" fill="#241F20"/>

Le d attribut est ce que vous recherchez.

34
Augustin Riedinger

Gimp peut être utilisé pour convertir des SVG contenant des primitives (par exemple des rects, des cercles, etc.) en un seul chemin utilisable dans HTML5.

  1. Premier téléchargement Gimp: https://www.gimp.org/downloads/
  2. Exportez votre SVG en tant que .svg fichier avec n’importe quel outil de choix, par exemple. Illustrateur. Ne vous inquiétez pas si la sortie SVG est désordonnée pour le moment, Gimp la nettoiera.
  3. Importez le fichier SVG dans Gimp avec Fichier -> Ouvrir , et la boîte de dialogue suivante (ou similaire) devrait apparaître:

Gimp SVG Open Dialog

Cochez les deux options Importer les chemins et Fusionner les chemins importés

  1. Ensuite, allez sur Windows-> Dialogues ancrables-> Chemins
  2. Cliquez avec le bouton droit sur le seul chemin qui dit Chemin importé et vous devriez voir la boîte de dialogue suivante:

enter image description here

  1. Cliquez sur Chemin d'exportation ... et enregistrez ce fichier texte à l'emplacement de votre choix.
  2. Recherchez et ouvrez ce fichier avec un éditeur de texte de votre choix, par exemple Bloc-notes, TextEdit.
  3. Copiez le texte dans le <path d="copy this text here" />
  4. Comme Gimp formate le texte avec beaucoup d'espaces, vous devrez peut-être le reformater en supprimant certains espaces pour le coller dans votre code HTML en une seule ligne.
30
Jasdeep Khalsa

Ouvrez le svg en utilisant Inkscape.

Inkscape est un éditeur svg. Il ressemble un peu à Illustrator, mais comme il est spécialement conçu pour svg, il le gère beaucoup mieux. C'est un logiciel gratuit et disponible @ https: //inkscape.org/en/

  • ctrl A (tout sélectionner)
  • décaler ctrl C (= chemin/objet vers les chemins)
  • ctrl s (enregistrer (choisir en tant que svg simple))

terminé

tous les rect/cercle ont été convertis en chemin

18
frenchone

(En réponse à la partie de la question "la situation s'est-elle améliorée?"):

Malheureusement pas vraiment. Le support d'Illustrator pour SVG a toujours été un peu fragile, et, après avoir jeté les bases de ses ressources internes, je doute que nous verrions beaucoup d'amélioration en ce qui concerne Illustrator.

Si vous recherchez un accès DOM à un document Illustrator dans le style DOM, vous pouvez consulter Hanpuk (divulgation 1: je suis l'auteur. Divulgation 2: c'est de la recherche code, ce qui signifie qu'il y a énormément de bugs et qu'un support futur est improbable).

Avec Hanpuku, vous pourriez faire quelque chose comme:

  1. Sélectionnez le chemin d’intérêt dans Illustrator
  2. Cliquez sur le bouton "To D3"

  3. Dans l'éditeur de script, tapez:

    selection.attr('d', 'M 0 0 L 20 134 L 233 24 Z');

  4. Cliquez sur courir

  5. Si les modifications sont conformes aux attentes, cliquez sur "To Illustrator" pour appliquer les modifications au document.

Certes, cette approche n'expose pas la chaîne de chemin d'origine. Si vous suivez les instructions vers la fin de la page d'accueil du plugin, il est possible de modifier le document Illustrator avec les outils de développement de Chrome, mais de nombreuses inesthétiques inventions sont exposées un peu partout (le DOM SVG qui reflète le document Illustrator est enterré dans un iframe profondément dans l'extension - changer le DOM avec les outils de Chrome et cliquer sur "To Illustrator" devrait toujours fonctionner, mais vous rencontrerez probablement beaucoup de problèmes).

TL; DR: Illustrator utilise un modèle interne très différent de SVG de nombreuses manières, ce qui signifie que lorsque vous effectuez une itération entre les deux, votre le seul choix est d'utiliser le sous-ensemble de fonctionnalités que les deux prennent en charge de la même manière.

3
accidental_PhD

Surpris, personne n'a mentionné l'option Enregistrer sous> Format du menu déroulant> .svg d'Illustrator.

Génère un fichier .svg contenant le chemin d'accès (et le reste de la définition svg) dans un fichier .svg (xml).

Le chemin lui-même est dans <path d>.

1
ericsoco