イラストレーターによってエクスポートされたsvgのビューボックス属性を変更します

38

viewBox = "-155.7 -99 510 510"のSVGファイルがあります。これにより、Mac OS Xプレビューのパスが-155.7 -99相殺されたと思います。IllustratorでSVGを開くと、パスがまったくオフセットされません。このsvgをどのようにエクスポートしますか：

  1. viewBox = "0 0 510 510"
  2. そして、すべてのパスが-155.7 -99のオフセットを追加しました

アートボードの位置を変更しようとしましたが、ビューボックスの原点が0,0になることはありません。

adobe-illustrator  svg 
— user1109371
ソース

回答:

6

私はSVGについて少し調査しましたが、どうやらビューボックスはIllustratorでエクスポートできる要素ではないようです。viewbox要素は、この要素の使用または操作を選択した特定のプログラムとのみ互換性があります。悲しいことに、Illustratorはそれらの1つではありません。

「Illustratorの編集機能を保持」せずにIllustratorからSVGを保存した場合、プロセスを逆にすることができます。SVGファイルのデータに加えた変更はすべて、Illustratorに反映されますが、アートボードとレイヤーの両方を再配置およびサイズ変更して、擬似ビューボックスを作成します。

今のところできることは、Illustratorでの設計作業と、ファイルデータ内でのビューボックスのオフセットと配置のためのすべての追加コードです。アートボードの幅+高さ/ X + Yの位置を変更し、オブジェクトのサイズと位置の属性も変更するだけで、擬似ビューボックスを作成できます。ただし、編集可能なビューボックス機能を備えたIllustratorのアップデートをリリースしない限り、真のビューボックス属性はありません。

IllustratorのSVG形式に関するいくつかの読み物：Adobe Illustrator SVG形式で保存

— マインドスパークス
ソース
1
Illustratorは、Illustrator CC（v 17.x）の時点でビューボックス属性をエクスポートします。
— ジェイクウィルソン14年
33

私はこの問題に何度か遭遇しましたが、IllustratorからエクスポートするときにSVGビューボックスを正確に0、0に確実にリセットすることができたのは、新しい空白のドキュメントを作成し、そこにアートワークをコピーして貼り付けることだけです。

この未処理のデフォルトアートボードの左上隅は、ビューボックスのポイント0、0としてエクスポートされます。アートワークを正確に0、0から開始する必要がある場合cmd-uは、スマートガイド（）またはにalign設定されたウィンドウを使用しAlign to Artboardます。

アートボードは右下隅から安全にサイズ変更できますが、左上隅を移動すると問題が発生し始めます。アートボードの左上隅を移動したり、SVGファイルをAIにインポートしたりすると、ルーラー、アートボード、およびIllustratorだけが知っている目に見えないシークレットビューボックスの原点の間に何らかの奇妙な内部切断が発生するようです。

AFAICTは、Webや新興技術に関するほとんどのことと同様に、AdobeのSVGへのアプローチは、プレスリリースで自慢できるように粗雑なものをまとめて、バグのある未完成で愛されていないふりをすることでした1998年のように存在し続けています。

— user56reinstatemonica8
ソース
1
Illustrator CCを使用する場合、これは機能しません。また、アートボードに合わせてアートワークのカスタムサイズを試してみました。最終的なSVGには、常に中央に配置されたビューポートがあります。
— wprater
1
奇妙な-間違いなくCS6で動作することができます。CS6とCCの間で変更されている必要があります-しかし、奇妙な変更のようです。
— user56reinstatemonica8
1
@ user568458これは私も使用している手法であり、正確ではありませんが、非常によく似ています。Illustratorの「アートボード」への変換は、viewboxSVGへのエクスポート時に変更される値に直接変換されます。新しいドキュメントを作成し、すべてのアートワークをコピーすることは完全に正しいです。あなたの答えは正しい+1としてマークされるべきです。
— テリー14
2
アドビはSVGの大きな支持者でしたが、svgが登場したとき、Macromediaの買収後数年間、フラッシュの成功を望んでいたため、この分野で何もしていませんでした。
— -joojaa
1
私はAdobe Illustrator CC 18.1.0を使用して完全に新しいドキュメントを作成し、svgをコピーして貼り付けます。その後、再保存がうまくいくようです。また、Preserve Illustrator Editing Capabilities調整をさらに行う必要がある場合に備えて、最初に保存することを確認し、すべてがかなり良いと思うと、それなしで保存します（ファイルサイズの増加はかなり重要であるため、この）
— 8月
7

私はこれがトピックに非常に遅れていることを知っていますが、私はこの同じ問題を抱えており、次のことをしました。

  1. テキストエディターでSVGを開き、viewBox属性を0 0 xyに変更します
  2. 保存して、Illustratorで再度開きます
  3. アートワークはアートボードの外側に配置されます-0 0に戻します
  4. 保存してプレビューすると、すべて正常に動作するはずです。

これが他の誰かに役立つことを願っています。

— マーク
ソース
こんにちはマーク、GDSEへようこそ、あなたの答えに感謝します。ご質問がある場合は、評判が十分になったらヘルプセンターをご覧になるか、チャットで私たちの1人にpingを送信してください（20）。引き続き貢献し、サイトをお楽しみください！
— ザックソーサー
私は追加することがわかりましたwidth="<W>" height="<H>"も役立ちます（ここで、SVGタグにあなたの好きなテキストエディタで<W>と<H>小数になります）。
— jtheletter
4

AIがアートボードのサイズを変更し続け、センタリングを忘れてしまうため、AIが作成したSVGがブラウザウィンドウ全体にセンタリングおよび展開されないという非常に似た問題がありました。

これを修正する唯一の方法は、Inkscapeで最終的な手動処理ステップを行うことです。

  • InkscapeでSVGを開きます
  • [ファイル]-> [ドキュメントのプロパティ]でキャンバスのサイズを変更します
  • アートワークを選択し、ツールバーの編集でw、hを入力して、アートワークのサイズを変更して移動します

最後に、SVGを再度保存する必要がありますが、[名前を付けて保存]ダイアログで「最適化されたSVG」形式を使用します。SVGオプションのダイアログがあり、「ビューボックスを有効にする」を有効にする必要があります。

私のSVGはすべて同じサイズのアイコンであるため、キャンバスとオブジェクトのサイズは常に同じであるため、この処理ステップには1分しかかかりません。しかし、はい、このステップがまったく必要であり、AIで修正する必要があるのは残念です。

— セビ
ソース
0

私はこれを理解しました。最後に！これを行う簡単な方法があります。そのようです：

<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>

問題は、Illustratorから画像をエクスポートすると（多くの場合）、エクスポートされたSVGにアートボードが含まれないことでした。パスには、計算の基になるものは何もありません。

私の場合、画像の最大の高さであり、100px幅と高さに基づいてこれらの画像のCSSスタイルを作成する必要がありました。CSSでは、vwユニットを使用100%します。SVGがブロックスペースを埋める場合は、単純に古いものを使用します。これはうまくスケールします。そうすれば、CSSの幅と高さを正しく設定するためにCSSで幅と高さを設定することに煩わされることはありません。

各ロゴを調べて、高さをに設定し100px、幅をアスペクト比に基づいて自動計算しました。次に、アートボードをロゴに合わせて、未使用のスペースを削除します。

長方形を選択し、塗りつぶしとストロークをオフにして、アートボードとまったく同じサイズであることを確認しました。この空白のオブジェクトを後ろに置きます。これで、パスをエクスポートすると、計算を行うためのベースが作成されます。

コードでこれを行うには、パスをaでラップし、rect幅と高さを設定してviewBoxから、同じ値に設定します（縦横比を同じに保ちます）。上記の例に示すように。これは実際にはテストしていませんが、テストして更新します。

— BugHunterUK
ソース
0

Inkscapeを使用して修正できました。IllustratorはSVGファイルのサポートが不十分なようです。

  1. Inkscapeでsvgファイルを開きます CTRL + O
  2. 次に、新しいファイルを作成します CTRL + N
  3. CTRL + SHIFT + D プロパティを文書化し、アートボードのサイズを調整します。 3
  4. 新しく作成されたファイルのsvgを選択してコピーします。
  5. 次に、位置とサイズの値を変更してアセットを調整します。Originとして位置を設定し、ドキュメントサイズとして幅と高さを設定するのと同じです。 5
  6. 新しいファイルを保存します。
— ファニ・リスヴィジ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.