SVGデータはどこまで反映されるか検証してみました

こんにちはrey( @reydesign8376) です
都内の勤務生活を辞めてWebデザイナーに。今は趣味のサーフィンなどしながら海沿いでのんびり暮らしています。

今回はSVGデータがどこまで描き出せるのかを
私と皆さんの仕事仲間であるAdobeXDで検証してみました!
SVGデータは数値で再現するデータ形式なので
全てのデザインを再現することが難しいのです。。。

目次

SVGとピクセル画像の違い

ご存知の人も多いと思うのでサクッと説明。

SVGはベクター数値座標でデザインを表現します
PNGやJPGはドットの集合体でデザインを表現します

SVGは単純なパスは綺麗に書き出せるけど、複雑なデザインは苦手なの
そんな性質を持っています。

検証

XDで6つのタイプを作成

  • ノーマル
  • ぼかし
  • ドロップシャドウ
  • 画像付き
  • クリッピングマスク
XDで作成したデータ

▼保存した条件はこちら

フォーマット:SVG
スタイル:プレゼンテーション属性
画像を保存:埋め込み
ファイルサイズを最適化(縮小)
>書き出し

検証結果

htmlを作ってアップ
結果は、背景ぼかし以外再現に成功しました!!圧勝です

Illustratorで背景ぼかしに挑戦

▼保存した条件はこちら

背景ぼかしは成功しました!
ですがフォントがNotoSansではない。。。
これは書式を「アウトライン化」で解決

まとめ

SVGでも再現高く書き出せました。
AdobeのアップデートのおかげでSVGでも再現できるデザインが増えてきているので
まだアップデートしていないよって方はアプデをお勧めします!

あわせて読みたい
アドビ:クリエイティブ/マーケティング/文書管理ソリューション アドビは世界を変えるデジタルエクスペリエンスを提供して、コンテンツやアプリの作成、配信、最適化を支援いたします。
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA

目次