こんにちはrey( @reydesign8376) です
都内の勤務生活を辞めてWebデザイナーに。今は趣味のサーフィンなどしながら海沿いでのんびり暮らしています。
今回はSVGデータがどこまで描き出せるのかを
私と皆さんの仕事仲間であるAdobeXDで検証してみました！
SVGデータは数値で再現するデータ形式なので
全てのデザインを再現することが難しいのです。。。
目次
SVGとピクセル画像の違い
ご存知の人も多いと思うのでサクッと説明。
SVGはベクター数値座標でデザインを表現します
PNGやJPGはドットの集合体でデザインを表現します
SVGは単純なパスは綺麗に書き出せるけど、複雑なデザインは苦手なの
そんな性質を持っています。
検証
XDで6つのタイプを作成
- ノーマル
- ぼかし
- ドロップシャドウ
- 線
- 画像付き
- クリッピングマスク
▼保存した条件はこちら
フォーマット：SVG
スタイル：プレゼンテーション属性
画像を保存：埋め込み
ファイルサイズを最適化(縮小)
＞書き出し
検証結果
htmlを作ってアップ
結果は、背景ぼかし以外再現に成功しました！！圧勝です
Illustratorで背景ぼかしに挑戦
▼保存した条件はこちら
背景ぼかしは成功しました！
ですがフォントがNotoSansではない。。。
これは書式を「アウトライン化」で解決
まとめ
SVGでも再現高く書き出せました。
AdobeのアップデートのおかげでSVGでも再現できるデザインが増えてきているので
まだアップデートしていないよって方はアプデをお勧めします！
コメント