Q&A
「SVCファイル」とありますが「SVGファイル」では。
illustratorで作成した画像を、pcブラウザで閲覧時にぼやけないように配置する
----質問----
Illustratorで作成した、グラデーションが多様に使われている画像を
webサイトのTOPページに配置したいのですが、pngデータでは輪郭がぼやけてしまうため
SVGデータで配置しようとしています。
しかし、
１ ずべて表示されるまでの読み込みに時間がかかる
-ページを開くときにレンダリングするためだと理解しています
２ そもそも、SVGデータは大きな背景の画像として適しているのか調べたが分からない
試したこと
png（png-24）で解像度300pxで別名保存し、配置してみたが輪郭がぼやけてしまう
-SVGで配置すると印刷物のように鮮明に再現されます。
SVGファイルを大きなサイズで配置する（1100*900程度）上での注意点など
あればアドバイスいただけると幸いです。
回答1件
0
ベストアンサー
１ ずべて表示されるまでの読み込みに時間がかかる
何が問題かを特定して対処したほうがよいです。大きなサイズのSVGなら読み込み自体が問題になっている可能性もあります。
【Timeline ツールの使い方 | Tools for Web Developers | Google Developers】
https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool?hl=ja
【Chrome Developer Toolsでパフォーマンス計測・改善 - Qiita】
https://qiita.com/y_fujieda/items/a0a69151cf7307039f74
【Chrome DevToolsを使用してサイトのパフォーマンス改善をしてみた - WILLGATE tech blog】
https://tech.willgate.co.jp/entry/2018/09/19/142216
サイズの問題であればHTMLに埋め込んでしまえば「ずべて表示されるまでの読み込みに時間がかかる」事は無くなるかもしれません。
あとは簡略化や不必要に分割されたパスの結合、不要な（表示に現れない）パスの削除なども試してみてください。
【基礎から学ぶ、IllustratorでSVGを最適化して書き出す方法 - WPJ】
https://www.webprofessional.jp/crash-course-optimizing-and-exporting-svgs-in-adobe-illustrator/
【精度を保ってSVGを1バイトでも小さくする - Qiita】
https://qiita.com/mochieer/items/5d26e49c85750756997a
【Webサイトを遅くするダメなSVG画像をスッキリ最適化する手軽な方法 - WPJ】
https://www.webprofessional.jp/three-ways-decreasing-svg-file-size-svgo/
２ そもそも、SVGデータは大きな背景の画像として適しているのか調べたが分からない
SVGの内容によるので適しているともいないとも一概に言えないと思います。複雑で細かく、フィルタやグラデーションを多用したSVGは、描画処理に時間がかかることもあるだろう、とは思います。
投稿2019/09/29 13:40
総合スコア69398
お礼が遅くなってしまい申し訳ございませんでした。
情報がとても少ないところ、回答いただきありがとうございました。
確かに描画に時間がかかっている状態ですので、画像の再現性を保ったまま
何か他の方法を探してみようと思います。
ありがとうございました。
あなたの回答
tips
プレビュー
