イラストレーター、ワードプレスについて質問します。


ワードプレスを使ってサイトを構築しています。
トップページのタイトル部をイラストレーターで作ったロゴに変更したのですが
テーマがそれに対応していなっかたため、
cssをいじって画像を挿入しました。

すると、ロゴが周りのテキストに比べると若干荒いんです。

ちゃんとロゴを画像トレースでベクター画像にして(あってますか?)
プラグインを使いsvg形式でワードプレスに保存しました。
保存するまえに何かの機能でベクター画像を高画質に編集出来たりするのでしょうか?


あと、ロゴなどをsvg形式で保存するときは(web用に保存)では保存できないということなので、
(別名で保存)で保存しました。
そうすると、(web用に保存)の時はアートボードサイズでクリップのチェックを外したら
ロゴのみ保存されるんですけど、(別名で保存)で保存する場合アートボードごと
保存されてしまい、web表示するとロゴが異常に小さくなってしまいました。

なので、アードボードのサイズ自体をロゴのサイズに合わせて作ってアートボードごと
保存して使っています。

これはあっているのでしょうか?

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2015/06/14 22:07:26
  • 終了:2015/06/16 21:55:06

ベストアンサー

id:dilutionist No.2

dilutionist回答回数154ベストアンサー獲得回数512015/06/15 16:50:31

ポイント100pt

SVGで保存するときの操作の手順としてはアートボードをオブジェクト全体にあわせる等してから別名で保存で正しいはずですが、SVGで保存したにもかかわらず粗く表示される、というのがどういう状況で起きうるのかちょっと思い付きません。
SVGの書き出しおよび表示方法

保存したSVGファイルを直接ブラウザで表示させた場合にきちんと表示されるか確認した上で、
CSSもいじっているということなので、変更した点と使用テーマを晒すと詳しい人が見てくれるかも知れません。

id:dilutionist

あとはイラストレーターからの保存時にレスポンシブのチェックをいじってみるとか。
イラレで書きだしたSVGのサイズを可変にする | NeGiMeMo.net

2015/06/15 17:57:18
id:worldkagu

素晴らしい回答ありがとうございました。
かなりためになりました!
一見jpgのほうが奇麗に見えるのですが、拡大するとsvgの本領が発揮されました。

2015/06/16 21:53:49

その他の回答(1件)

id:NAPORIN No.1

なぽりん回答回数4685ベストアンサー獲得回数8572015/06/14 22:46:54

うーん、SVG形式よりラスタのjpgなどのほうが、どのブラウザでもつねに綺麗にみえる気がしますが。
http://www.atmarkit.co.jp/ait/articles/0802/15/news150.html
ここにSVGでつくった画像サンプルがありますが、私の環境では化けたり見えないです。
イラレからラスタへの書きだし自体は(pdf経由などになるかもしれませんが)自分もやったことがあります。

id:dilutionist No.2

dilutionist回答回数154ベストアンサー獲得回数512015/06/15 16:50:31ここでベストアンサー

ポイント100pt

SVGで保存するときの操作の手順としてはアートボードをオブジェクト全体にあわせる等してから別名で保存で正しいはずですが、SVGで保存したにもかかわらず粗く表示される、というのがどういう状況で起きうるのかちょっと思い付きません。
SVGの書き出しおよび表示方法

保存したSVGファイルを直接ブラウザで表示させた場合にきちんと表示されるか確認した上で、
CSSもいじっているということなので、変更した点と使用テーマを晒すと詳しい人が見てくれるかも知れません。

id:dilutionist

あとはイラストレーターからの保存時にレスポンシブのチェックをいじってみるとか。
イラレで書きだしたSVGのサイズを可変にする | NeGiMeMo.net

2015/06/15 17:57:18
id:worldkagu

素晴らしい回答ありがとうございました。
かなりためになりました!
一見jpgのほうが奇麗に見えるのですが、拡大するとsvgの本領が発揮されました。

2015/06/16 21:53:49
  • id:rouge_2008
    トレース後の状態では、ロゴ画像は綺麗な状態なのでしょうか?
    トレース元のロゴ画像はどのようにして用意しましたか?(「パンフレットからスキャナで解像度xxxdpiで取り込んだ」など・・・)
    ロゴのサイズやロゴの種類(テキスト or テキスト + イラスト)等の情報も提示した方がいいと思います。

    元のロゴ画像(※トレース前)が綺麗なのでしたら、そのままサイトに表示しても大丈夫だと思いますが、SVG形式にする理由があるのでしょうか?

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません