SVGでやることのまとめ。Wedとりとめないメモ。TueSVGでやることのまとめ。Satスクロールパラパラ。Wedふりがなを振る。Wed段組みのCSS。Sunウィンドウ幅いっぱいのヘッダー画像。Wedよこ並びのCSS。Friコンテナからの解放。Tueイラレでイラスト。Wed動くCSSのためのメモ。Thuなつかしくってあったかい、きりぎりす。Sun透明ノイズと紙テクスチャ。Sun透明にしないでテクスチャSVGでやることのまとめ。TueSVGは、Webサイトの中では、アイコンやロゴやシンプルなイラストに使われている、拡大してもずっと綺麗な画像ファイルです。画像フォーマットでありながら、XMLに基づくマークアップ言語でもあるので、テキストエディタで編集できてしまえるのも魅力。そんなSVGファイルを作るときに僕がよくやることをちょこちょこまとめてゆきます:)。書き出しはイラレからXMLに基づくマークアップ言語とはいえ、複雑な図形やイラストは、人力では到底マークアップできません...X‹。Illustrator(以下、イラレ)で制作して、そのままイラレから、SVGファイルとして書き出すことが常です。ここでは、このサイトの左上にいるパンちゃんアイコン(以下、ロゴのパンちゃん)を書き出してみます:)。イラレのデータを用意まずは何はなくともaiデータを用意しなくちゃいけません。「新規...(⌘+N)」で、ひとまず、サイズを「Web」として開きます。アートワーク(ここではロゴのパンちゃん)を、既存のアートボードの外にコピペ。アートボードツールにして、ロゴをクリック※すると、そのオブジェクトサイズぴったしのアートボードが作成されます:)。※ちゃんとオブジェクトをクリックしないと作成されないので注意。アートボードのサイズ(幅と高さ)は、整数になるように調整しておきます。最初にあったアートボードは削除して、パンちゃんのアートボードだけにしたら、「保存(⌘+S)」で、わかりやすいファイル名(ここでは「logo_pan.ai」)で「保存」します。(svg)」を選択します。オプション」パネルが表示されます。1.1」が現在、W3Cで勧告されているいちばん新しい規格になります。文字も画像もないので、「フォント」、「オプション」は特に気にせず、デフォルトのままです。オプション」パネル続いて、詳細オプションの設定は以下の通り。プロパティ」は、「スタイル要素」を選択します。”とのことですけど、HTML/CSSに馴染みのある僕らには「スタイル要素」がいちばん読みやすいソースコードなので、ここは「スタイル要素」でSVGコードを書き出すことにします:)。「小数点以下の桁数」には「3」と入力。小さなアイコンなので細かいニュアンスもちゃんと描画されるように、最適とされる「3」を指定します。(UTF-8)」にして、その他のオプションは、すべてチェックを外しておきます(※詳しくは後述)。コード」ボタンをクリックすれば、書き出されるSVGコードを事前に確認することもできるので、余計なSVGファイルを作らずに、HTMLに直接コピペで、事なきを得ることもできちゃいます:D。今回はOKをクリック。SVGファイルができましたー!SVGコード書き出したSVGファイルの中身は、以下のようなSVGコードになります。d="M31.769,57.917c-1.285,3.401,0.96,6.262,5.865,5.602c4.958-0.667,6.5-5.052,3.572-8.239"/></g></svg>パッと見なにが何だかわからないですけれど、3行めのid="レイヤー_1"というのは、もしかしてイラレのレイヤー名かな。イラレのレイヤー構造と見比べてみると(下図)、なんとなくSVGの階層構造が見えてきますね...!イラレでグループ化したところはg要素で括られて、グループ化されているのが分かります。レイヤー構造とSVG構造の見比べ試しにレイヤーに名前を付けてみると、SVG要素のid属性として反映されました。レイヤーにちゃんと名前をつければ、どの要素がどのパスを表すのか分かるようになりますね:D。オプション」パネル内の説明の欄を参照のこと。パネル内の項目にカーソルを合わせると、詳しい説明が表示されます。あと、各項目についての公式の説明は、下記ページでも確認できます。以下、詳細オプションの項目について、個人の見解です。プロパティ」プレゼンテーション属性SVG要素に用意されている、見た目を司つかさどる属性「プレゼンテーション属性」を使って、スタイルを適用します。SVG要素ごとに属性を書き込むので、ソースコードが煩雑になりがち:(。下のサンプルのpath要素にあるfillとかstrokeとかstroke-widthとかが、プレゼンテーション属性です。MDNスタイル属性SVG要素にstyle属性を指定して、スタイルを適用します。こちらも結局、SVG要素に逐一style属性を書き込むので、ソースコードが溢れかえりがちX(。上のサンプルと見比べると、プレゼンテーション属性だったところが、見事にCSSプロパティに置き換わっているのがわかりますね。(実体参照)実体エンティティ宣言というXMLの構文を使って定義した「実体エンティティ参照」を、style属性の値として指定して、スタイルを適用します。style="&st0;"...という風に使われています。”とのこと...ほんとうに?:/。Docsスタイル要素HTMLと同じように、style要素内にスタイルを定義して、class属性でもって、スタイルを適用します。小数点以下の桁数アンカーポイントやパスラインの座標位置の厳密度を表します。「1」にすると下ソースコードみたくなります(最初のpath要素のみ抜粋)。d="M20.6,29.4c-4.1,1.3-4.8,6-1.9,8.4"/>「3」にすると下ソースコードみたく、小数点以下の桁数が増えてますね。d="M20.65,29.392c-4.072,1.321-4.773,5.981-1.871,8.363"/>小数点以下の最大桁数(1桁〜7桁まで)を指定します。値が大きければ桁数が増えて、その分、細かなニュアンスがしっかりと再現されます。ここでは「3」にしましたけれど、ピクトグラムみたいな単純な図形やアイコンの場合には「1」にします。ここは大体いつも「1」か「3」です。(なんとなく「2」にはしません。(UTF-8)」を選択します。エレメントの出力を制御チェックしてないと、文字の詰め具合カーニングが調整されてるテキストに対して、一文字ずつ<tspan>要素で括ってx属性で左右に動かしてカーニングを再現するため、ソースコードがものすごく読みづらくなっちゃいます。テキストがある場合にはチェックした方が良いです。エレメントを使用パスラインに沿わせたテキストがある場合に、textPath要素を使って、ちゃんとパスラインに沿ったテキストとしてデータを書き出してくれます。チェックしてないと、一文字ずつtext要素で括って、x/y属性やrotate属性を駆使して、あたかもパスラインに沿ってるかのように配置した状態で書き出されます。パスラインに沿ったテキストがある場合には、チェックした方が良いです。レスポンシブ書き出されるコードのsvg要素からwidth属性とheight属性が出力されなくなります。width/height属性があってもCSSでサイズを変更することはできるし、あった方がいいんじゃないかなーと思うので、チェックしません。スライスデータを含めるスライス機能を利用している場合に、その情報がmetadata要素として出力されます。利用してなくても、いろんなエンティティ宣言が書き出されてしまうので、Webサイトで使う分には、チェックすることはなさそうです。含めるイラレで作成・編集されたことを記録するさまざまな情報(メタデータ)が書き出されます。長いので、Webサイトで使う分には、チェックすることはありません。メタデータページトップへ戻るソースコードを整えるイラレのデータから書き出したSVGファイルのソースコードを整えてゆきます。最適化という意味もありますけれど、SVG画像には、HTMLで表示させる方法が幾通りもあるので、使い方に合わせてカスタマイズする目的もあります:)。ひと通り取っ払うまずは、SVGコードから一旦、ひと通りの余分なコードを取り払うべく、SVGファイルを圧縮します。SVGファイルの圧縮には以下のサイトが便利です;)。GUIサイトへアクセスしたらば、おもむろに、SVGファイルをドラッグしてドロップ!logo_pan.svgをブラウザ画面へドロップすると、ドロップしたアイコンが表示されて、右側にいろんなオプションが表示されてる画面に移ります。Paths」だけチェックを外しました。「svg要素からviewBox属性を削除しないように」と、「path要素をマージ※2しないように」ということになります。ALL」をクリックするとデフォルトに戻ります。※2.path要素をマージすると、イラレで複数のパスを複合パスにした状態になります。スタイルや属性値が同じなのに分かれてるpath要素がマージされます。Paths」のチェックを外すヘッダーの「MARKUP」をクリックすれば、圧縮されたSVGコードが確認できます。Downloadアイコンをクリックして、SVGファイルをダウンロードすることもできますけれど、今回は、圧縮されたコードを元のSVGファイルへコピペして済ませちゃうことにします;D。textアイコンをクリックして、SVGコードをクリップボードにコピーしたらば、元のSVGファイルへ上書きペースト!こんな感じのコードになりました。3.572-8.239"/></g></svg>見やすく改行とインデントを入れると、以下のようになります。3.572-8.239"/></g></svg>SVGコードを整理整頓さらに目視で、削除できる属性は片っ端、削除しちゃいます。x="0"とy="0"はSVGコンテナー(アートボード)のX/Y座標を表しますが、デフォルト値が0なので削除しちゃって問題ありません。”とのことなので、今のうちから削除してしまっても良いです。MDNpath要素すべてにclass属性がついてるのは、なんだか効率が悪いですね:(。g要素で括っているので、class属性は消しちゃって、g要素のid属性に対してスタイルを指定することにします。最初の.st0,.st1,.st2は、つまり全部のpath要素に適用するということなので、#panにまとめちゃえます。.st1,.st2に適用してから.st2に同じプロパティを指定してるのは無駄なので、最初の,.st2はなくても大丈夫。id="eye">の中にしかないので#eyeにしちゃいます。3.572-8.239"/></g></g></svg>ページトップへ戻る用途に合わせてカスタムここから更に、使用する場面に合わせてコードをカスタマイズしてゆきます。SVGファイルをHTMLで表示する方法は以下の4種類。img/object要素で設置するimg要素で画像を配置する方法。背景画像として表示するCSSのbackgroundプロパティを使って、HTML要素の背景画像として表示する方法。65">〜</svg>まで)を丸ごとHTMLにコピペして、画像を配置する方法。use要素で設置するSVGのuse要素を使ってSVGファイルの、任意のid属性を持つ要素だけを読み込む方法(※詳しくは後述)。最初のふたつは、「SVGファイルも画像ファイルなので、他のフォーマットの画像(jpgとかpngとか)と同じように扱うことができる」ということ。あとのふたつは、XMLに基づくマークアップ言語ならではの方法で、HTMLに直接SVGコードを記述する方法です。data="logo_pan.svg"></object>と記述するだけ、いちばん簡単な表示方法です:)。ロゴのパンちゃんには、紫のパンちゃんのほかに、白のパンちゃんがいるので、別途白いパンちゃんの画像も用意する必要があります:‹。ここでは「logo_pan.svg」の線の色を白くした、「logo_pan_white.svg」を用意しました。背景画像として表示する画像なので、もちろんCSSの背景画像としても表示できます。下サンプルは、上段がdiv要素に背景画像を表示するタイプ、下段がp要素の擬似要素に対して背景画像を指定するタイプ。ここでも、白いパンちゃんには「logo_pan_white.svg」を用意しています。svg要素を直接書き込むHTML内に直接、svg要素まるごと書き込みます。HTMLの中にg要素やpath要素が直接あるということは、HTML側のCSSからスタイルが指定ができるということ!下のサンプルでは、svg要素内のstyle要素をそっくりそのまま、HTMLのhead要素へ移動しています。この方法ならば、画像はひとつも要らないし、CSSでstrokeプロパティの値を変えるだけでどんな色のパンちゃんも表示できちゃいます:D。ソースコードが長ーくなってしまうのが玉に瑕きず...X‹。※HTML内に記述する場合は、svg要素のxmlns="http://www.w3.org/2000/svg"(名前空間宣言)は不要。use要素で設置するuse要素では、xlink:href属性で、SVGファイルまでの場所パスを指定します。そのあとにSVGファイル内で使っているidを続けて指定します。ここでは、「logo_pan.svg」と「logo_pan_white.svg」のsvg要素に付けている#logoというidを使って、下記のように指定しています。xlink:href="logo_pan.svg#logo"></use></svg>パンちゃん真っ黒ですね...:ᗡ。実は、use要素で読み込まれるのは、SVGの中でも描画可能要素だけなんです...X(。style要素が読み込まれなくて、パンちゃん真っ黒になってしまったんですね...。描画可能要素については下記ページを参照のこと。MDNstyle要素が読み込めないならば、xlink:href属性のid指定は#logoから#panに変えることにします。SVGファイル内にあったstyle要素は削除して、HTMLのhead要素内にコピペすれば、svg要素の時みたく、strokeプロパティの値を変えるだけでどんな色のパンちゃんも表示できちゃうかもしれませんね...:D!真っ黒のまま...。id="pan">〜</g>が入っているのがわかります。DOMという、外側の構造やスタイルに影響されない隔離された要素として読み込まれるみたいなのです。DOMについて詳しくは下記ページを参照のこと。DOMにも反映されるみたい...!:o下サンプルでは、上のサンプルで#panに指定していたスタイルを、useに指定しなおしています。線の太さは均一だけれどちゃんとパンちゃん表示されてます!(※FirefoxとEdgeなら線の太さもばっちりッ;D)use要素を、線の太さごとに小分けに書き出せば、線の太さも個別に変えられそうですね...!use要素を複数、目(#eye)、口(#mouse)、前髪(#hair)と、体の輪郭(#body)に分けて設置して、個別に線の太さを指定したい、目と体の輪郭には、id名と同じclass名を付けることにします。class="body"></use></svg>全部のpath要素に指定するスタイルはsvg要素に指定して、.eyeと.bodyにそれぞれ線の太さを指定します。無事、ロゴのパンちゃん表示されました!...とはいえ、変えたいのは線の色だけなので、むしろ、HTML側から指定するのはstrokeだけで十分な気もしますね...:ω。いうことで下サンプルでは、SVGファイル内のid属性は、id="pan"だけ残してあとは削除。g要素を線の太さごとに括りなおして、style属性で線の色以外のスタイルを適用。HTML側のstyle要素で線の色だけ指定しています。こっちの方が、ソースコードがすっきり明快で分かり良いかもしれませんねー:D。3.572-8.239"/></g></svg>小さなアイコンだと違いはわからないですが、大きなSVGファイルになると、きっと軽いのかもしれません...。ページトップへ戻るあとがき今回は、ロゴのパンちゃんだったので、こういう仕様のSVGファイルになりましたけれど、もしかして、線の太さも変えたかったり、カーソルを乗せると塗りがカラフルになったり、クリックしたらアイコンが動き出したり、させたい場合には、もっと別のカスタマイズになると思います。して、自分の使いやすいようにカスタムされたSVGファイルは、Webサイト内で便利に使い回せるようになるってわけです;)。もんで、以上、ロゴのパンちゃんを作るときにやることでした。SVGでやることのまとめ。23:45まじでサイトかわいいですー!デザイン変えたんですね。こちらの記事もめっちゃわかりやすくて感動でした。ありがとうございました。コメントデータの処理方法の詳細はこちらをご覧ください。