HTML5 SVG
HTMLマニュアルHTML <svg>要素は、SVGグラフィックのコンテナーです。
SVG（Scalable Vector Graphics)は画像フォーマットの一種で、webに適したベクターファイル形式です。SVG には、ボックス、円、テキストを描くさまざまな使い方があります。
SVGをHTMLページに直接埋め込む
HTML5では、SVGコードを直接HTMLファイルに埋め込むことができます。
例として、以下のようなSVGのコードを埋め込むことができます。これにより、CSSやJavaScriptでSVG要素を操作することが可能になります。
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="pink" />
</svg>このコードは、ピンクの円を描くSVGの例です。
<img>タグを使ってSVGファイルを表示する方法もあります。
<img src="image.svg" alt="サンプルSVG画像">SVGを使ったデザイン
SVGを使った矢印
SVGで描画された矢印アイコンを表示しています。
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M10,6L8.59,7.41,13.17,12l-4.58,4.59L10,18l6-6Z" fill="#000" />
</svg>CSSでSVGアイコンの色を変更する
SVG要素のスタイルは、CSSを使って簡単にカスタマイズできます。
以下の例では、SVG矢印アイコンの色を赤に変更しています。
<style>
.arrow-icon path {
fill: red;
}
</style>
<svg class="arrow-icon" width="24" height="24" viewBox="0 0 24 24">
<path d="M10,6L8.59,7.41,13.17,12l-4.58,4.59L10,18l6-6Z" />
</svg>SVGアニメーションの例
CSSアニメーションを使って、SVG要素に動きを追加できます。
以下の例では、SVGで描画された円が左右に動くアニメーションを実装しています。
<style>
@keyframes move {
0% {
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
100% {
transform: translateX(0);
}
}
.circle {
animation: move 2s linear infinite;
}
</style>
<svg width="200" height="100">
<circle class="circle" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="pink" />
</svg>レスポンシブなSVGの例
SVGは自動的にスケーリングされるため、レスポンシブデザインに適しています。
以下の例では、ウィンドウサイズに応じてSVGがリサイズされるように設定されています。
<style>
.responsive-svg {
width: 100%;
height: auto;
}
</style>
<svg class="responsive-svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="pink" />
</svg>SVGの幅を100%に設定し、高さを自動調整することで、異なるデバイスや画面サイズに対応したデザインが実現できます。
インタラクティブなSVGの例
JavaScriptを使って、SVG要素とユーザーのインタラクションを実装することができます。
以下の例では、SVGで描画された円をクリックすると、色がランダムに変更されるインタラクションを実装しています。
<script>
function changeColor() {
var circle = document.getElementById("interactive-circle");
var colors = ["red", "blue", "green", "yellow", "purple"];
var randomColor = colors[Math.floor(Math.random() * colors.length)];
circle.setAttribute("fill", randomColor);
}
</script>
<svg width="100" height="100" onclick="changeColor()">
<circle id="interactive-circle" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="pink" />
</svg>円をクリックしてみてください。
SVGを使ったデータ可視化の例
SVGを利用することで、データの可視化やインフォグラフィックスを簡単に実現できます。
以下の例では、SVGで縦棒グラフを描画しています。
<svg width="200" height="150">
<rect x="10" y="50" width="30" height="100" fill="blue" />
<rect x="50" y="30" width="30" height="120" fill="green" />
<rect x="90" y="80" width="30" height="70" fill="red" />
<rect x="130" y="10" width="30" height="140" fill="purple" />
</svg>このように、HTML5とSVGを組み合わせることで、ウェブデザインに多様な表現を実現できます。
これらの実例とコードを参考にして、SVGを使ったデザインやインタラクションを試してみましょう。
SVGを使用する利点（読まなくてもいい）
HTML5のSVGを利用することで、ウェブデザインに以下のような利点があります。
- 解像度に依存しない：SVG画像は拡大・縮小しても品質が劣化しません。これに対して、JPEGやGIFなどのビットマップ画像は、拡大するとピクセルが目立ってくるため、画質が低下します。。
- ファイルサイズの削減：SVGはXMLベースのテキストフォーマットであり、簡単な図形やアイコンなどでは非常にコンパクトなファイルサイズになることが多いです。これにより、ウェブページの読み込み速度が向上します。
- 編集性：テキストエディタで簡単に編集できます。また、CSSやJavaScriptとの相互作用が容易であり、アニメーションやインタラクションの実装が可能です。
- アクセシビリティ：SVG画像はテキスト情報を持つことができるため、スクリーンリーダーなどのアクセシビリティツールが対応しています。これにより、視覚障害者や検索エンジンにも情報が正しく伝わります。
- レスポンシブデザイン：SVGは自動的にスケーリングされるため、デバイスや画面サイズに応じて自然にリサイズされます。これにより、レスポンシブデザインの実現が容易になります。
ただし、SVGは主にイラストやアイコン、図形などのシンプルなグラフィックスに向いており、写真や複雑な画像には向いていません。そのような場合は、JPEGやPNGなどのビットマップ画像形式が適切です。
コメント