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:
- viewBox = "0 0 510 510"
- 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.
adobe-illustrator
svg
utilisateur1109371
la source
la source
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 laalignfenêtre définie surAlign 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.
la source
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.
la source
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.
la source
J'ai compris ça. Finalement! Il y a un moyen simple de faire ça. Ainsi:
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 desvwunités, ou tout simplement ancien100%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éfinirviewBoxde 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.la source
J'ai pu résoudre ce problème en utilisant Inkscape . On dirait qu'Illustrator ne prend pas en charge les fichiers SVG.
la source