終了

svg書き出しでパスが変形してしまう

Community Beginner ,
Mar 01, 2022 Mar 01, 2022

リンクをクリップボードにコピー

コピー完了

フォントサイズ11pxのテキストをアウトライン化して
svgとして書き出すと、パスの形が変わってしまいます。
書き出したsvgをイラストレーターで開き、書き出し前のaiファイルのオブジェクトと比較すると、アンカーポイントが増えていました。

 

reference.png

バグなのでしょうか?
パスが変形しないように書き出す方法があれば知りたいです。
是非お知恵をお貸しいただければと思います。

 

書き出し前のファイル【*添付ファイル:test.ai】
書き出したSVG【*添付ファイル:test-export.svg】

 

■ 書き出し時の設定
書き出し -> スクリーン用に書き出し
フォーマット SVG
形式の設定【*添付ファイル:setting.png】


■ 作業環境
MacBook Pro (16-inch, 2019)
macOS: Catalina
イラストレーターのバージョン :adobe Illustrator 2022(v26.0.3*最新)
※ adobe Illustrator 2021でも確認しましが、同様の結果でした。


■ 以下補足です。
なぜか、オブジェクトを大きくして書き出すと変形は起こりません。(大きくしたaiファイルです->【【*添付ファイル:test-big.ai】)

また、テキストのフォントサイズを上げてからアウトライン化しても、同じように変形は起こりませんでした。
フォントにもよりますが、フォントサイズ20〜30pxくらいの大きさから変形しなくなるかと思います。
例)試したテキスト【@og】
□ Noto Sans JP
11px ×
22px ×
44px  ○

□ 小塚ゴシック Pr6N
11px ×
22px ○
44px ○


添付ファイル ▼
https://drive.google.com/file/d/1JuVQdbMTQIPaHZhUb2ZArgzTegQ4j393/view?usp=sharing

キーワード
バグ , 機能改善リクエスト , 読み込みと書き出し

表示

3.8K

翻訳

翻訳

レポート

レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines

correct answers 1 件の正解

Community Expert , Mar 02, 2022 Mar 02, 2022

たしかに、書き出しの方は楕円円弧曲線に置き換えることによって形状が歪みます。フォントのアウトライン化からのデータであれば3次のベジェ曲線で書き出せばIllustratorデータの持つパス情報をそのまま書き出せば良いんですけど、それをしていません。
一方、別名で保存を行えば意図したパスの状態で保存できるはずです。
サイズが小さいために楕円曲線近似を行った際に誤差が大きくなっているのだと思います。この処理自体はメリットが無いでもないので間違いであるとは言い切れませんので、ユーザー側で特性を理解し使い分ける必要がありそうです。
文字であれば標準的なフォントを利用しアウトラインをかけずに書き出すという選択肢もありますので、これもうまく使い分ける必要がありそうです。

投票

翻訳

翻訳
Community Expert ,
Mar 02, 2022 Mar 02, 2022

リンクをクリップボードにコピー

コピー完了

たしかに、書き出しの方は楕円円弧曲線に置き換えることによって形状が歪みます。フォントのアウトライン化からのデータであれば3次のベジェ曲線で書き出せばIllustratorデータの持つパス情報をそのまま書き出せば良いんですけど、それをしていません。
一方、別名で保存を行えば意図したパスの状態で保存できるはずです。
サイズが小さいために楕円曲線近似を行った際に誤差が大きくなっているのだと思います。この処理自体はメリットが無いでもないので間違いであるとは言い切れませんので、ユーザー側で特性を理解し使い分ける必要がありそうです。
文字であれば標準的なフォントを利用しアウトラインをかけずに書き出すという選択肢もありますので、これもうまく使い分ける必要がありそうです。

投票

翻訳

翻訳

レポート

レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines
Community Beginner ,
Mar 03, 2022 Mar 03, 2022

リンクをクリップボードにコピー

コピー完了

最新

別名で保存を行い、変形することなくSVGとして書き出すことができました!(感激です)
*この時に【アートボードごとに作成】にチェックを入れると変形が起こってしまうようでしたので、
最初から書き出したいアートボードサイズでファイルを作成するなど、工夫しつつ作業しようと思います。

 

> サイズが小さいために楕円曲線近似を行った際に誤差が大きくなっている
「楕円円弧曲線」や、「楕円曲線近似」は存じ上げなかったのですが、
調べつつ、小さいと変形してしまう仕組みについてもイメージすることができました。

 

詳しく教えていただき、ありがとうございました。

投票

翻訳

翻訳

レポート

レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines