SVG学習 11日目「ファイルになったsvg操作」

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

SVGデータが一般的になってきて、ほぼどのブラウザでも表示できる環境になってきました。
 

そんなSVGデータ(ファイル)は、WEBページで表示する時に、以下のようにいくつかの方法があります。
 

1. HTMLにSVGタグとして記載
2. imgタグのsrc属性で登録
3. objectタグのdata属性で登録
4. embedタグのsrc属性で登録
5. cssのbackground-imageとして表示

 

方法がいくつかありますが、それぞれのやり方によって、できる事できない事があります。
 

svgデータの属性をcssでコントロールしようとすると、1番で行わないとセキュリティ違反になってしまい、1番以外の方法では操作できません。
 

またcssも擬似要素として使おうとすると、サイズコントロールがうまくできなかったりもします。
 

今回は、svgをファイルとして扱える2番、3番、4番を対象に記事を書きます。
 

SVGをファイル化しておくと、アイコンなどとしての利用にものすごく便利なため、フリー素材などを、さらに扱いやすいデータに調整する方法をお教えします。

必要最低限構成

SVGファイルの内容は、出力するアプリケーションなどによってさまざまな記述になっています。
 

それらは、フリー素材集がダウンロードできるサイトなどで取得したsvgデータをテキストエディタで開いてみると簡単に確認できます。
 

個人的には、アイコンなどで利用することが多いのですが、WEBページで使う素材としてのアイコンは、背景色などによって、アイコンの色味を変更する必要があり、その時に便利な記述方法と、フリー素材などの編集方法を理解しておきましょう。
 

基本的に、SVG画像としての最低構成は以下の通りです。
 

 

画像データ部分は、通常のsvg記述です。svgタグには、色々な記述をしてある場合もありますが、基本的には、xmlnsとviewBoxがあれば十分です。サイズコントロールなどはviewBoxでちゃんと行う必要があるので、注意しましょう。
 

DOCTYPEや、xml記述をしているファイルもありますが、厳密に言うと必要な場合もありますが、画像ファイルとして利用する場合は、不要な為、データ軽減も含めて最小構成に留めておいた方が懸命でしょう。

色変更を便利に行うために

色を管理するのは非常に重要で、ここでのポイントは、styleタグで描画している画像の塗りつぶし色を設定する点でモノトーンアイコンであればここのみで色管理ができます。
 

画像によっては、線に色付けが必要な場合は、「stroke:%color;」と追記する必要もありますが、class名やid名など、ここで一元管理する事で、カラーコントロールがかなり簡易になります。
 

SVGファイルは、外部からコントロールできないというデメリットと同時に、内部だけで完結できるidやclass名を使えるので他のページの要素に左右されずに扱うことがメリットでもあります。
 

本当ならこれをcssファイルなどでページや条件ごとに変更できると非常に便利なんですが、どうしてもアクセスできないため、僕の場合は、ここを手作業で書き直してカラーセットを作って運用しています。
 

きっとさらなる便利構成も今後できると思いますが、今の所の限界構成として利用して見たい人は自己責任にてご使用ください。

過去のSVG記事

SVG学習 1日目「SVGの利点を再確認」
SVG学習 2日目「基本描画」
SVG学習 3日目「Javascriptで描画」
SVG学習 4日目「テキストと画像ファイルの挿入」
SVG学習 5日目「SVGアニメーション」
SVG学習 6日目「グループ」
SVG学習 7日目「イベント」
SVG学習 8日目「PATH」
SVG学習 9日目「株価チャート」
SVG学習 10日目「UIを良くするアニメーション」

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です