イラレで書き出したSVGをWordPressで使う

まずイラレで素材を作ります。

例のイラストはイラストACで引っばってきています。
パスファインダーを駆使して一つのオブジェクトにします。白い部分はきり抜くような感じです。

別名保存でSVGにします。

スポンサードリンク

SVGコードを押します。そうすると下記の様なコードが現れるので全てコピーします。

「 「<svg〜」に対してもクラスを付けます。このクラスを利用してCSSのwidthやheightを指定することが出来ます。

svgをひとファイルにまとめる
svg_data.svgというファイルを作成します。

こんなデータをつくりましょう。
先程イラレで作成したデータを<!– ここにSVGコードが入ります —>の下に入れます。
vieBox=の箇所はイラレからコピーした物に書き換えます。
「」のIDは任意です。

使用したいPHPに以下を入力します。

その後使用したい箇所に以下を入れます。hrefの箇所は.svgデータで任意に入力したIDと揃えてください。

svgのクラスにたいして（上記ではarrow）「fill:#0000ff」などと入力すると色が変わります。同様にsvgに幅や高さ等を指定することが出来ます。

無駄なデータの除去

とあります。

最初の方の

↓

でオッケーです。viewBoxの値に注意。
styleなどがついてたら消しちゃいましょう。

---

 

おまけ

svgでくるむやり方とsymbolでくるむやり方があるみたいですが、どっちもいけるようです。