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:
J'ai essayé de changer la position de la planche graphique mais l'origine de viewbox n'est jamais 0,0.
Réponses:
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
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.
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.
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)
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.
J'espère que cela aide quelqu'un d'autre.
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).
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.
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.
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.
J'ai pu résoudre ce problème en utilisant Inkscape . On dirait qu'Illustrator ne prend pas en charge les fichiers SVG.
