手抜きをこじらせてSVG画像一枚のみのWebページを作りました

SHIKA

「デザインからコードを起こすのが面倒。画像をそのままWebページにできたらいいのに…。」って思ったことありませんか? そんなあなたの怠惰な望みも、SVG画像でレスポンシブデザインにも対応しつつ実現できるかもしれません。 この記事ではSVG画像がベクター画像であるという特性を利用してWebページを作ってみました。

実際に作ったページはこちら。 SVG画像のみのWebページ - SHIKA

なぜSVG画像なのか

SVGとPNGだと拡大した際にSVGの方が綺麗。
一言で言うと「画像のスケールが変わっても綺麗だから」です。 PNG画像はラスタ形式ですが、SVG画像はベクター形式なので拡大による劣化がないのです。
これによりただの画像をWebページと錯覚させる表現ができます。 レスポンシヴデザインによる縮尺の変更にもバッチリ対応です。

ベクター画像について

手抜きをこじらせているので引用します。

Adobe Illustrator、Adobe Flash等で扱われる図版、イラストのデータ形式。ベクター形式のデータは、データ内部で線や曲線を数式として扱っているため、図版やイラストを拡大・縮小・回転等を行っても画質が劣化することない。
nakayasu.com

手抜きでもせめてリンクは欲しいよね

SVGを開いて xlink:href を仕込む事で実現できます。

<a xlink:href="https://www.facebook.com/pages/しか" target="_blank">
<g>
<path fill="#454246" d="省略"/>
<path fill="#FFFFFF" d="省略"/>
</g>
</a>

どこがどのパスかわからなくなりますが、保存した際のレイヤー通りに並んでいる他、グループ化をしておくとgタグが付くのでそれを目安にリンクを設定します。

また、隙間の多いパスはクリックしづらいため、真下にクリックしやすいパスを用意しておくと良い。 リンク用に四角を作っておくと良い。

保存の際の注意

保存の際に注意すること。 他の画像を参照している場合、参考方法を「埋め込み」にしておく事でSVG画像自体のファイル容量は大きくなりますが、ファイルが一つで済みます。

文字をアウトライン化しない場合、tspanタグエレメントの出力を制御のチェックを外さないと表示する際に文字のレイアウト崩れが起きます。

プロファイルはSVG1.1が良いと思います。

SVG画像のWebページ化

HTML

<article class="screen">
<object data="svg-shika/shika.svg" type="image/svg+xml"></object>
</article>
<!-- モバイル用  -->
<article class="mobile">
<object data="svg-shika/shika_mobile.svg" type="image/svg+xml"></object>
</article>

CSS

html, body, object{
    min-height: 100%
}
body{
    width: 100%;
    margin: 0;
    /* SVG画像と同じ背景色 */
    background: #DFD9CB
}
object, svg{
    width: 100%
}

/* モバイル用 */
.mobile{
    display: none
}
@media screen and (max-width:800px){
    .screen{
        display: none
    }
    .mobile{
        display: block
    }
}

たったこれだけ。色々とこじらせてますね。

SEO対策

.text{
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden
}
<div class="text">
<h1>SHIKA</h1>
<p>草食性で、ウシのように4つに分かれた胃を持ち、反芻による消化を行う。<br> オスは枝分かれしたツノを持つ。多くのシカ科のメスはツノを持たないがトナカイはオスメス共にツノを持つ。ウシ科の動物のツノ(洞角)は骨の芯があり生え替わらずに一生伸び続けるが、シカのツノ(枝角)は皮膚が盛り上がって作られるもので毎年生え替わる。角は触ると硬いが、水につけていると自然と軟らかくなる。縄文人たちはこうする事で角を釣り針や矢じりなどの自由な形に加工していたと考えられている。<br> 体の大きさは体重6-8kg程度のプーズー (チリに生息) から、体重800kgにも及ぶヘラジカ (ムース) まで様々である。</p>
</div>

この方法でちゃんとインデックスされるかはGoogleのみぞ知る。ご機嫌を損ねてGoogle様からペナルティを貰うかもしれません。

SHIKAはインデックスされてました。
Google検索