Changer l'attribut viewbox en svg exporté par illustrator


38

J'ai un fichier SVG avec viewBox = "- 155.7 -99 510 510". Je pense que cela compense les chemins dans l'aperçu Mac OS X de -155,7 à 99. Lorsque j'ouvre le fichier SVG dans Illustrator, les chemins ne sont pas du tout décalés. comment puis-je exporter ce svg tel que:

  1. viewBox = "0 0 510 510"
  2. et tous les chemins ont été ajoutés au jeu de -155.7 -99

J'ai essayé de changer la position de la planche graphique mais l'origine de viewbox n'est jamais 0,0.

Réponses:


6

J'ai fait quelques recherches sur les SVG et apparemment, la zone de visualisation n'est pas un élément exportable via Illustrator. L'élément viewbox n'est compatible qu'avec certains programmes ayant choisi d'utiliser ou de manipuler cet élément. Malheureusement, Illustrator n'en fait pas partie.

Si vous avez enregistré le fichier SVG dans Illustrator sans "Conserver les fonctionnalités d'édition Illustrator", vous pouvez inverser le processus. Quelles que soient les modifications apportées aux données du fichier SVG, elles seront ensuite reflétées dans Illustrator, mais le repositionnement et le redimensionnement de la planche graphique et des calques créeront une pseudo-vue.

Pour l'instant, tout ce que vous pouvez faire est de travailler dans Illustrator et avec tout le code supplémentaire pour le décalage et le positionnement de la zone de visualisation dans les données du fichier. Vous pouvez créer une pseudo-vue en modifiant simplement la position Largeur + Hauteur / X + Y de la planche de travail, puis en modifiant les attributs Taille et Position des objets. Mais il n’existera jamais d’attribut true viewbox, à moins qu’ils ne publient une mise à jour vers Illustrator avec des fonctionnalités de viewbox modifiables.

Quelques lectures sur le format SVG dans Illustrator: Adobe Illustrator Sauvegarder au format SVG


1
Illustrator exporte l'attribut viewbox à partir d'Illustrator CC (v 17.x).
Jake Wilson

33

J'ai rencontré ce problème à plusieurs reprises et la seule chose qui m'a jamais aidé à réinitialiser de manière fiable la zone de visualisation SVG à 0, 0 lors de l'exportation à partir d'Illustrator est de créer un nouveau document vierge et de copier et coller l'illustration dans celui-ci. .

Le coin supérieur gauche de cette planche d’art par défaut non exportée sera exporté en tant que point 0, 0 de la zone de visualisation. Utilisez les guides intelligents ( cmd-u) ou la alignfenêtre définie sur Align to Artboardsi vous souhaitez que votre illustration commence exactement à 0, 0.

Vous pouvez redimensionner la planche d’art en toute sécurité à partir du coin inférieur droit, mais les choses commencent à mal se passer si vous déplacez le coin supérieur gauche. Déplacer le coin supérieur gauche des planches d'art ou importer des fichiers SVG vers AI semble provoquer une sorte de déconnexion interne étrange entre les règles, les planches d'art et une sorte de point d'origine de la visionneuse secrète invisible, connu uniquement d'Illustrator.


AFAICT, comme dans la plupart des domaines liés au Web ou aux technologies émergentes, l’approche d’Adobe vis-à-vis du SVG a consisté à rassembler quelque chose de grossier pour qu’ils puissent se vanter de cela dans un communiqué de presse, puis le laisser de côté, inachevé et mal aimé, en prétendant ne pas le faire. existe et continue comme en 1998.


1
Cela ne fonctionne pas pour moi avec Illustrator CC. J'ai également essayé la taille personnalisée Artboard to Artwork. Le fichier SVG final a toujours une fenêtre centrée.
wprater

1
Étrange - peut certainement travailler dans CS6. Doit avoir changé entre CS6 et CC - semble être un changement étrange cependant.
user56reinstatemonica8

1
@ user568458 C'est la technique que j'utilise aussi, pas exacte mais très similaire. Toute transformation du "Artboard" dans Illustrator se traduira directement par les valeurs viewboxmodifiées lors de l'exportation au format SVG. Vous avez tout à fait raison de créer un nouveau document et de copier toutes les illustrations. Votre réponse doit être marquée comme étant correcte +1.
Terry

2
Adobe était un fervent partisan de SVG, mais c'est à ce moment-là que svg faisait son apparition. Ils n'avaient rien fait dans ce domaine depuis plusieurs années après l'acquisition de Macromedia, car ils voulaient que Flash réussisse.
joojaa

1
J'utilise Adobe Illustrator CC 18.1.0 et je crée un tout nouveau document en copiant et collant mon fichier svg, puis en enregistrant à nouveau, ce qui semble bien fonctionner. Je veille également à vérifier Preserve Illustrator Editing Capabilitiesla première fois que je sauvegarde au cas où j’aurais besoin de faire d’autres ajustements, puis après je pense que tout va bien, je le sauve sans cela (l’augmentation de la taille du fichier est assez importante, vous voudrez donc le faire cela)
août

7

Je sais que c'est très tard pour le sujet, mais j'avais le même problème et j'ai fait ce qui suit.

  1. Ouvrez le fichier SVG dans un éditeur de texte et modifiez l'attribut viewBox en 0 0 xy
  2. Enregistrez-le et rouvrez-le dans Illustrator
  3. L'œuvre sera maintenant positionnée à l'extérieur de la planche - déplacez-la à 0 0
  4. Enregistrer et prévisualiser, tout devrait bien fonctionner.

J'espère que cela aide quelqu'un d'autre.


Bonjour Marc, bienvenue sur GDSE et merci pour votre réponse. Si vous avez des questions, consultez le centre d’aide ou envoyez une requête de conversation à l’un de nous deux lorsque votre réputation est suffisante (20). Continuez à contribuer et profitez du site!
Zach Saucier

J'ai trouvé que l'ajout width="<W>" height="<H>"de votre éditeur de texte préféré à la balise SVG aide également (où <W>et <H>seraient des nombres décimaux).
jtheletter

4

J'ai eu un problème très similaire: mon fichier SVG créé par l'IA n'était pas centré et étendu à la fenêtre de navigation complète, car l'IA changeait constamment la taille de la planche graphique et oubliait le centrage.

La seule façon de résoudre ce problème consiste à avoir une dernière étape de traitement manuel dans Inkscape.

  • ouvrir le fichier SVG dans Inkscape
  • redimensionner la toile sous Fichier -> Propriétés du document
  • redimensionnez et déplacez votre illustration en la sélectionnant et en entrant les lettres w, h dans la barre d'outils

Enfin, vous devez enregistrer à nouveau le fichier SVG, mais utilisez le format "SVG optimisé" dans la boîte de dialogue Enregistrer sous. Il y aura une boîte de dialogue pour les options SVG et vous devez activer "Activer la visualisation".

Comme tous mes SVG sont des icônes de la même taille, cette étape de traitement ne prend que 1 minute car j'ai toujours le même canevas et la même taille d'objet. Mais oui, il est dommage que cette étape soit absolument nécessaire et qu’elle soit corrigée dans l’IA.


0

J'ai compris ça. Finalement! Il y a un moyen simple de faire ça. Ainsi:

<svg id="xbox" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60.7"><title>xbox</title><rect width="200" height="60.68" style="fill:none"/><path d="M195.2,49.2l-11.8-16-11.5,16h-4.8L181.2,30,168.4,12.8h4.8l10.2,14,10.5-14h4.8L185.9,30,200,49.2Zm-90.7,0L90.4,30l12.8-17.2H98.4l-10.5,14-10.3-14H72.8L85.6,30l-14,19.2h4.8l11.5-16,11.8,16Z" style="fill:#0f7c10"/><path d="M131,31.3l-2.2-1.6a8.2,8.2,0,0,0,4.4-7c0-2.6-.9-9.9-12.1-9.9H106.4V28.4h-4.8l-2.9,3.5h7.7V49.2h14.7c8.3,0,13.1-4.2,13.1-10.9a8.6,8.6,0,0,0-3.2-7m-20.5-15h10.6c3.2,0,8,1,8,6.1s-2.9,6-8,6H110.5Zm10.6,29.1H110.5V31.9h10.6c4.1,0,8.9,1.3,8.9,6.4s-5.4,7.1-8.9,7.1m32.3-33.6c-10.3,0-17.3,7.7-17.3,19.2s7,18.8,17.3,18.8,17.5-7.6,17.5-18.8-7.3-19.2-17.5-19.2m0,34.2c-7.7,0-13.1-6.1-13.1-15s5.4-15.3,13.1-15.3S166.8,22,166.8,31s-5.5,15-13.4,15M8.9,8.6h0A31,31,0,0,0,0,30.4,32.5,32.5,0,0,0,6.1,48.9h.3C4.2,41.5,16,24.3,22,16.9h0C11.8,6.4,8.9,8.9,8.9,8.6m42.9,0h0a31,31,0,0,1,8.9,21.8,32.5,32.5,0,0,1-6.1,18.5h-.3c2.2-7-9.6-24.3-15.6-31.6h0C48.9,7,51.8,9.6,51.8,9.3M30.4,0A29.9,29.9,0,0,1,46.3,4.5h0c0,.3,0,.3-.3.3C40.3,3.5,31.3,8.3,30.4,8.9h0C28.1,7.7,19.8,3.2,14.7,4.8a.3.3,0,0,1-.3-.3h0A30,30,0,0,1,30.4,0m0,24.3h0c9.2,7,24.9,24.3,20.1,29.1h0a31.5,31.5,0,0,1-40.3,0h0C5.8,48.6,21.1,31.3,30.4,24.3h0" style="fill:#0f7c10"/></svg>

Le problème était que lorsque vous exportez une image depuis Illustrator (comme beaucoup le font), la planche graphique n'est pas incluse dans le fichier SVG exporté. Les chemins n'ont rien sur lequel fonder leurs calculs.

Dans mon cas, la hauteur maximale de mes images était 100pxet je devais baser les styles CSS pour ces images en fonction de leur largeur et de leur hauteur. En CSS, j'utilise des vwunités, ou tout simplement ancien 100%si le SVG doit remplir un espace bloc. Cela évolue bien. De cette façon, vous n'avez pas à vous soucier de définir la largeur et la hauteur en CSS pour vous assurer qu'elles s'affichent correctement.

J'ai parcouru chaque logo et réglé la hauteur sur 100pxet laissé la largeur calculer automatiquement en fonction du rapport de format. Je place ensuite la planche d’art sur le logo pour supprimer tout espace inutilisé.

J'ai sélectionné un rectangle, puis j'ai désactivé le fond et le trait, et je me suis assuré qu'il avait exactement la même taille que la planche graphique. Placez cet objet vide à l'arrière. Maintenant, lorsque vous exportez, le chemin aura une base sur laquelle effectuer les calculs.

Pour faire cela dans le code, il apparaît que vous pouvez envelopper les chemins dans un rectet définir sa largeur et sa hauteur, puis vous pouvez le définir viewBoxde la même manière (conserver les rapports de format identiques). Comme indiqué dans l'exemple ci-dessus. Je n'ai pas réellement testé cela, mais je vais tester et mettre à jour.


0

J'ai pu résoudre ce problème en utilisant Inkscape . On dirait qu'Illustrator ne prend pas en charge les fichiers SVG.

  1. Ouvrez le fichier svg dans Inkscape CTRL + O
  2. Puis créez un nouveau fichier CTRL + N
  3. CTRL + SHIFT + D Propriétés du document et ajustez la taille de la planche graphique. 3
  4. Sélectionnez et copiez le svg dans le fichier nouvellement créé.
  5. Ajustez maintenant l'actif en modifiant les valeurs de position et de taille. J'aime définir la position en tant qu'origine et la largeur et la hauteur en tant que taille du document. 5
  6. Enregistrez le nouveau fichier.
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.