HTML5 でインラインSVGの要素をいじってみる

お仕事でHTML5のインラインSVGを触る機会があったので、簡単に備忘録として。

今までAdobeのSVG Viewerとか使わないとできなかったことが、HTML上でできるようになっているようです。

しかもHTMLの要素へのアクセスとほぼ同じにアクセスできるというので、簡単なサンプルを組んでみました。

 

◯とりあえずサンプル

はい素敵！

インラインSVGであれば、HTMLと同様に、getElementByIdでエレメントを取得でき、addEventListenerでイベントリスナーの設定も出来てしまう。

iPadやandroidタブレットで表示して、ピンチイン/ピンチアウトしても当然SVGなので、きれいなベクターデータとして表示されます。

ただ、今回のお仕事以外で活用できそうな場面が思いつかないなぁ・・・。