デザイナーTweetFlash全盛期などには、イラストの中の要素をクリックしてページを移動するようなサイトを時々見かけました。実はSVG内の要素にHTMLのように<a>でリンクをつけることができます。SVG内の要素にリンクをつけることができると、Illustratorなどで作ったベクター形式のイラストをそのまま使えるので、Flashのようにイラストの中の要素をクリックして移動するということが、HTMLだけで組むよりも簡単に行えるようになります。↓こちらはそちらを利用して作ってみたものです。方法はとてもシンプルです。Illustratorを使って、イラストを制作してください。このとき、リンクさせる要素ごとにグループ化を行っておくと、リンクをつけやすくなります。イラストができたら、SVG形式でファイルを保存します。保存できたら、書きだしたSVGファイルをテキストエディタ等で開き、<svg>・・・</svg>のところをコピーして、HTML上にペーストして配置します。opacity="0.3">・・・</svg></div></body></html>配置したら、リンクをつける要素を見つけ出して、そこにリンクを付けます。要素をグループ化しておくと、見つけ出しやすくなります。ブラウザの「要素を検証」機能を使うとすぐ見つけることができます。見つけたら、その要素を<a>で囲みます。ここまでは通常のHTMLと同じですが、リンク先の指定方法がSVGの場合、少し異なります。「xlink:href=”リンク先”」という指定の仕方をします。その他はHTMLの<a>と同じで、target=”_blank”の指定もできます。d="M190.055,154.583c-3.911-20.583-22.809-35.312-44.155-33.552c-6.136,0.506-11.843,2.333-16.881,5.163c-5.435-1.966-11.364-2.833-17.5-2.328c-17.179,1.417-31.043,13.109-36.057,28.538c-20.909,3.642-35.958,22.702-34.18,44.264c1.729,20.976,18.782,37.002,39.247,38.013c8.37,9.35,20.864,14.809,34.334,13.697c7.515-0.62,14.389-3.216,20.173-7.221c6.362,3.003,13.569,4.438,21.084,3.818c8.283-0.683,15.788-3.764,21.91-8.49c2.17,0.166,4.38,0.169,6.619-0.016c22.833-1.883,39.818-21.919,37.935-44.753C221.048,173.084,207.422,158.352,190.055,154.583z"/>・・・</a>この例ではページ内のアンカーリンクになっていますが、URLの指定をして別のページにリンクさせることも、もちろん可能です。場所の計算も大変で、特にレスポンシブではかなりの手間がかかってしまいます。その点、インラインSVGを使った方法では、Illustratorで書きだしたイラストをそのまま使えるので、かなり手間が軽減できます。現時点でiPhoneでもSVG要素のページ内のアンカーリンクが使えるようにする場合は、jQueryで以下の様なコードを追加してください。ProfileninomiyaWebデザイナー兼コーダーです。イラストを描くのも好きです。SVGとCanvasを使ったWEBアプリにも興味があります。2013.10.09HTML5とCSS3の勉強を始めました。