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