今回はSVGについて２つの方法をご紹介したいと思います。
- svgをhtmlで書いてスタイルをつける方法
- 出来上がったsvg画像を使う方法
svgをhtmlで書いてスタイルをつける方法
まずはsvgタグを書きます。
<svg></svg>そして、widthとheightを指定します。
<svg width="200" height="200"></svg>その中に四角や
<rect x="50" y="50" width="200" height="200" fill="green"></rect>まる
<circle cx="90" cy="100" r="10" fill="yellow" class="big"></circle>を書きます。
それぞれタグの指定の仕方は色々あるので、
SVGリファレンスを見て試してみてください。
そして、この書いた図形に色をつけることもできますし、
fill="green"classをつけてアニメーションさせることもできます。
class="big"<style>
.small {
animation: move .5s infinite cubic-bezier(0, 0.38, 0.37, 1.08);
}
@keyframes move{
0%{
translate: 0 0;
}
100%{
translate: 0 -5px;
}
}
</style><html lang="ja">
<head>
<meta charset="utf-8">
<title>SVG</title>
</head>
<body>
<svg width="200" height="200">
<rect x="50" y="50" width="200" height="200" fill="green"></rect>
<circle cx="90" cy="100" r="10" fill="yellow" class="big"></circle>
<circle cx="160" cy="100" r="10" fill="yellow" class="big"></circle>
<rect x="105" y="140" width="40" height="30" fill="yellow" class="small"></rect>
</svg>
</body>
</html>そうするとこうなります。
See the Pen svg for beginner by JandSadaKo (@green555) on CodePen.
なかなか楽しいですよ。
出来上がったsvg画像を使う方法
次に、出来上がったsvg画像を使う方法についてです。
svgはアイコンやロゴに使ったりすることが多いです。
それはimgがラスター画像に対してsvgはベクター画像だからです。
svgがimgに比べて優れている点は、
拡大しても画像が荒れない点です。
というわけで、本題です。
まずはsvg画像をイラストレーターなどで作るか、
ダウンロードして素材準備します。
今回使用するのはこちらの画像です。
よければダウンロードして使ってください。(wordpressはsvg画像がアップロードできないのでjpegですが）
デスクトップにドラッグ＆ドロップでダウンロードできます。
このsvgをエディタで開きます。
するとこういった感じになっています。
<?xml version="1.0" encoding="UTF-8"?><svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 141.43 167.39"><defs><style>.cls-1{fill:none;}.cls-2{fill:#97c0e8;opacity:.83;}.cls-3{opacity:.23;}.cls-3,.cls-4{fill:#7fc5ef;}.cls-4{opacity:.46;}.cls-5{fill:#6cc0ea;opacity:.64;}</style></defs><g id="svg_group"><path class="cls-1" d="M0,126.57V40.83L70.72,0V85.75S0,126.57,0,126.57ZM70.71,.02L0,40.84V126.56s70.7-40.82,70.7-40.82V.02Z"/><path class="cls-1" d="M141.43,126.57h0s-70.71-40.83-70.71-40.83V0s0,0,0,0l70.71,40.82V126.57ZM70.72,.02V85.74l70.7,40.82V40.83L70.72,.02Z"/><polygon class="cls-4" points="0 126.57 70.72 167.39 70.72 81.66 0 40.83 0 126.57 0 126.57"/><polygon class="cls-2" points="70.72 167.39 141.43 126.57 141.43 40.83 70.72 81.66 70.72 167.39 70.72 167.39"/><polygon class="cls-5" points="70.71 81.66 141.42 40.83 70.71 0 0 40.83 70.71 81.66 70.71 81.66"/><polygon class="cls-3" points="141.43 126.57 70.72 167.39 0 126.57 70.72 85.74 141.43 126.57 141.43 126.57"/></g></svg>この中の不要な部分は取り除きます。上では赤くマーカーした部分です。
まず、このsvgをbodyタグの中に貼り付けます。
次に、svgタグの中にsymbolタグを入れて、idをつけます。
そして、使いたい場所にsvgタグを入れます。
ここにwidthとheightを指定します。
さらに、useタグで囲んで先ほどsymbolで指定したidをhref=””属性の中に入れます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>SVGの使い方</title>
</head>
<body>
<svg id="svg" style="display: none";xmlns="http://www.w3.org/2000/svg" viewBox="0 0 141.43 167.39">
<symbol id="square_box">
<g id="svg_group"><path class="cls-1" d="M0,126.57V40.83L70.72,0V85.75S0,126.57,0,126.57ZM70.71,.02L0,40.84V126.56s70.7-40.82,70.7-40.82V.02Z"/>
<path class="cls-1" d="M141.43,126.57h0s-70.71-40.83-70.71-40.83V0s0,0,0,0l70.71,40.82V126.57ZM70.72,.02V85.74l70.7,40.82V40.83L70.72,.02Z"/><polygon class="cls-4" points="0 126.57 70.72 167.39 70.72 81.66 0 40.83 0 126.57 0 126.57"/>
<polygon class="cls-2" points="70.72 167.39 141.43 126.57 141.43 40.83 70.72 81.66 70.72 167.39 70.72 167.39"/><polygon class="cls-5" points="70.71 81.66 141.42 40.83 70.71 0 0 40.83 70.71 81.66 70.71 81.66"/><polygon class="cls-3" points="141.43 126.57 70.72 167.39 0 126.57 70.72 85.74 141.43 126.57 141.43 126.57"/>
</g>
</symbol>
</svg>
<section>
<svg width="141" height="167"><use href="#square_box"></use></svg>
</section>
</body>
</html>これでまずはsvgが表示されます。
そして、
<def></def>の部分の<style></style>だけコピーして、
cssに貼り付けます。
.cls-1{fill:none;}.cls-2{fill:#97c0e8;opacity:.83;}.cls-3{opacity:.23;}.cls-3,.cls-4{fill:#7fc5ef;}.cls-4{opacity:.46;}.cls-5{fill:#6cc0ea;opacity:.64;}この色を下のように書き換えると、
.cls-1{fill:none;}.cls-2{fill:red;opacity:.83;}.cls-3{opacity:.23;}.cls-3,.cls-4{fill:green;}.cls-4{opacity:.46;}.cls-5{fill:orange;opacity:.64;}こうなります。
さらにアニメーションなども付け加えることができます。hoverすると回転します。
See the Pen svg for beginner2 by JandSadaKo (@green555) on CodePen.
是非試してみてください。
