システム関連のお困りごとはコアースにお任せください
通常ページへ

SVGを活用して図形を描いてみよう！ － 新米web担のためのホームページの作り方 | 第20回

はじめてのホームページ作成

先回は、アイコンの表示などで活用できるSVGフォーマットについて解説しました。今回はその延長として、SVGを活用してホームページ上で図形を描く方法を解説したいと思います。　SVGを活用することによって、ホームページ上のデザインをさまざまにスタイリングできますので、どうぞご活用ください。

 

 

目次

SVGを活用してホームページ上に図形を描くとは？

先回解説したように、通常のJPEGやPNG画像をSVGというフォーマットに変換して、図形を表示することができます。

これとは別のSVGの活用方法として、HTML上に直接その計算式（コマンド）を記入し、ページ上に自由に画像を描くこともできます。

例えば、簡単な例として、この機能を活用することにより以下のような表示を実現できます。

 

この図形は例えば以下のようなホームページにも活用されています。

以下のページの背景が斜めに区分けされていることにお気づきと思いますが、この表示にはSVGによる作図が使用されています。

 

SVGを活用して図形を描くメリット

１．シンプルに希望のスタイルを実現できる

例えば、上記のような単純な図形の場合、HTMLにコピー＆ペーストするだけで実現できます。図形を別ファイルで準備したり、CSSで複雑なスタイリングをしたりする必要はありません。

参考となるSVGの記述はネット上にたくさんありますので、参考にできると思います。

 

 

２．綺麗に図形を描ける

例えば、斜めに線を引きたい場合、SVG以外にもいくつか方法が在るのですが、斜めの線がギザギザになってしまったりと、なかなか難しいものなのです。

特にレスポンシブ対応にする場合、表示部分の幅、高さが常に変化しますので、それに対応するとなると一筋縄ではいきません。　筆者もこの点についていろいろ試したのですが、単に斜めにラインを引いたり色を分けたりしたいだけであれば、このSVGによる作図を活用する方法がベストとの結論に達しました。

 

 

３．対応しているブラウザが多い

やはり一番ネックは Internet Explorer への対応であると思います。このSVGを活用した方法は現在のモダンブラウザすべてで問題なく表示することができます。

 

 

SVGを活用した作図方法の苦手分野

それはずばり複雑な図形です。　例えば、SVGを活用して星型の図形を描こうとする場合、まあまあ大変な量の記述が必要になります。

例えば、星を描く場合

<svg width="400" height="400" viewBox="-200 -200 400 400">
　<g transform="translate(0,16) scale(2)">
　<path
　　　d="M0.000 -100.000
　　　L-31.153 -42.878
　　　-95.106 -30.902
　　　-50.406 16.378
　　　-58.779 80.902
　　　-0.000 53.000
　　　58.779 80.902
　　　50.406 16.378
　　　95.106 -30.902
　　　31.153 -42.878
　z"/>
</g>
</svg>

などのようになります。

しかし・・・このように複雑な図形の場合、わざわざHTML側で計算式を書かなくても、SVGファイルとしてすでに無料で提供されているアイコンをダウンロードし活用する（この前の記事で解説）ほうが、効率が良いと思います。

そのようなわけで、このSVGの計算式をHTMLに記述して表示する方法は、簡単な図形を実現するためだけに使用することをお勧めします。

では実際に、ホームページ上に斜めに色分けしてみましょう。

 

 

SVGを活用して作図する手順

１．SVGタグを使用しHTMLに記入

HTMLには「svg」タグを使用し記入します。このタグの中のいろいろな記述は細かく突き詰めると、複雑になりますので今回はパスしたいと思います。興味をお持ちの方は、ぜひ調べてみてください。

もっとも、意味が分からなくても、コピー＆ペーストするだけで実現できますので、それでよいと思います。

以下のものは左上から右下に色を分ける方法です。

<div class="slanting">
　　<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
　　　 <polygon points="0,0 100,100 0,100"/>
　　</svg>
</div>

 

 

２. CSSでスタイリングを行なう

適当なクラス名を付けて、スタイリングを行ないます。この色が高さなどいろいろ変えることによって、希望のスタイルを実現できます。

.slanting {
　　position: relative;
　　height: 200px;
　　background: #ddd;
}
svg {
　　position: absolute;
　　bottom: 0;
　　width: 100%;
　　height: 200px;
　　fill: #5f5f5f;
}

 

 

３．ブラウザで表示を確認

ブラウザで以下のように表示されていれば問題なく記述できています。

 

 

その他の図形のSVG

※　CSSは上記とすべて同じです。

１．左下から右上にかけて色分けする

HTML

<div class="slanting">
　　<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
　　<polygon points="0,0 100,100 0,100"/>
　　</svg>
</div>

 

 

２．上部を丸く色分けする

HTML

<div class="slanting">
　　<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
　　<path d="M0,0 Q50,50 100,0"></path>
　　</svg>
</div>

 

 

３．上部を逆三角に色分けする

HTML

<div class="slanting">
　　<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
　　<polygon points="0,0 50,50 100,0"/>
　　</svg>
</div>

 

追加：サンプルコード

参考のため、以下のページ表示のためのコードを記しておきます。

 

HTML

<!DOCTYPE html>
<html>
　<head>
　　　<meta charset="utf-8">
　　　<meta name="viewport" content="width=device-width,initial-scale=1">
　　<title>はじめてのホームページ</title>

　　<link rel="stylesheet" href="css/style.css">

　</head>
　<body>

　<header>
　　<div class="top-image-area">
　　　<div class="logo-container">
　　　　<img src="img/logo2.svg" alt="">
　　　</div>
　　</div>
</header>

<div class="main">
　<div class="main-contents">

<h1>トップページ</h1>

　<div class="slanting">
　　　<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
　　　<polygon points="0,0 50,50 100,0"/>
　　　</svg>
　</div>

　<div class="spaser"></div>

　<div class="slanting">
　　　<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
　　　<path d="M0,0 Q50,50 100,0"></path>
　　　</svg>
　</div>

　<div class="spaser"></div>

　<div class="slanting">
　　　<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
　　　<polygon points="0,0 100,100 0,100"/>
　　　</svg>
　</div>

　<div class="spaser"></div>

　<div class="slanting">
　　　<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
　　　<polygon points="0,100 100,0 100,100"/>
　　　</svg>
　</div>

　<div class="spaser"></div>

　<div class="contents">
　<h2></h2>
　</div>

　</div>
　　<div class="right-navi">
　　　右側のカラム
　　</div>
　</div>
　　<div class="left-navi">
　　　左側のカラム
　　</div>

　<div class="footer">
　　　ここにはフッターメニューが入ります
　</div>


</body>
</html>

 

CSS

body{
　　background-color: lightyellow;
}
header {
　　height: 300px;
　　position: relative;
}
h1,h2 {
　　margin: 0;
　　padding: 1em 0;
　　text-align: center;
　　color: #ddd;
}
.spaser{
　　height: 100px;
}
.top-image-area{
　　width: 100%;
　　height: 100%;
　　background-image: url("../img/topimage.jpg");
　　background-position: 50% 20%;
　　background-size: cover;
}
.logo-container{
　　width: 70px;
　　height: 70px;
　　margin-top: 10px;
　　margin-left: 10px;
}
.logo-container img{
　　height: 100%;
　　width: 100%;
}
.slanting {
　　position: relative;
　　height: 200px;
　　background: #ddd;
}
svg {
　　position: absolute;
　　bottom: 0;
　　width: 100%;
　　height: 200px;
　　fill: #5f5f5f;
}
.contents {
　　
}

.footer{
　　height: 200px;
　　background: black;
　　color: #fff;
　　clear: both;
}
.main-contents, .left-navi, .right-navi {
　　height: 100%;
}
.main-contents {
　　float: left;
　　width: 80%;
}
.left-navi {
　　background-color: blue;
　　color: #fff;
　　width: 20%;
　　float: right;
　　height: 400px;
}
.right-navi {
　　background-color: blueviolet;
　　color: #fff;
　　float: right;
　　width: 20%;
　　height: 400px;
}
.main{
　　width: 80%;
　　float: right;
}
@media screen and (max-width: 600px){
.main, .left-navi,.main-contents, .right-navi{
　　width: 100%;
}
}

 

まとめ

単純な図形を作図したいときはSVGをぜひ活用してみてください。

一方、いくらか複雑な図形の場合はSVGファイルを読み込んでアイコンとして表示する方法をおすすめします。