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 viewBox="0 0 画像の理論幅 画像の理論縦" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">*{fill:塗りつぶし色style>
<画像データ>
</svg>
画像データ部分は、通常のsvg記述です。svgタグには、色々な記述をしてある場合もありますが、基本的には、xmlnsとviewBoxがあれば十分です。サイズコントロールなどはviewBoxでちゃんと行う必要があるので、注意しましょう。
DOCTYPEや、xml記述をしているファイルもありますが、厳密に言うと必要な場合もありますが、画像ファイルとして利用する場合は、不要な為、データ軽減も含めて最小構成に留めておいた方が懸命でしょう。
色変更を便利に行うために
色を管理するのは非常に重要で、ここでのポイントは、styleタグで描画している画像の塗りつぶし色を設定する点でモノトーンアイコンであればここのみで色管理ができます。
画像によっては、線に色付けが必要な場合は、「stroke:%color;」と追記する必要もありますが、class名やid名など、ここで一元管理する事で、カラーコントロールがかなり簡易になります。
SVGファイルは、外部からコントロールできないというデメリットと同時に、内部だけで完結できるidやclass名を使えるので他のページの要素に左右されずに扱うことがメリットでもあります。
本当ならこれをcssファイルなどでページや条件ごとに変更できると非常に便利なんですが、どうしてもアクセスできないため、僕の場合は、ここを手作業で書き直してカラーセットを作って運用しています。
きっとさらなる便利構成も今後できると思いますが、今の所の限界構成として利用して見たい人は自己責任にてご使用ください。
0 件のコメント:
コメントを投稿