最近、HTML5でベクターグラフィックスを取り扱う時にSVG形式のファイルを利用しているWEBサイトが増えて来ている。iOS系のデバイスが超高解像度のRetinaディスプレイを採用しているので、PCサイト向けに準備した800×600や1024×740といった大きめな画像でも、Retina端末で見るとぼやけてしまうという状況になったのが原因かもしれない。この状況でRetinaディスプレイでも綺麗に見れる高精細な画像を提供しようとすると、今度はファイルサイズが肥大化して、トラフィック側に悪影響が出るというジレンマに悩まされる。それらを解決すべく利用が進んだのがSVG形式のベクター画像だ。 数年前、SVGGirlとかいうコンテンツが流行っていた時は、まだSVG形式のファイルを利用できるブラウザが少なかったんだが、今どきのモダンブラウザは普通の画像ファイルと同じ感じに簡単に取り扱えるようになった。
![HTML5でのSVGファイル操作のおさらい - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/1b53939f719e5ab01bfee7e75be5195d3a91a746/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9SFRNTDUlRTMlODElQTclRTMlODElQUVTVkclRTMlODMlOTUlRTMlODIlQTElRTMlODIlQTQlRTMlODMlQUIlRTYlOTMlOEQlRTQlQkQlOUMlRTMlODElQUUlRTMlODElOEElRTMlODElOTUlRTMlODIlODklRTMlODElODQmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTQ1MmU2NjhmZWEwMjE5NzUyOGJlODM3NzQyZTQwZTE4%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrYTIxNSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NTBlOGRmYzA5NDVmMTc3MjU3MjhhYTQ2YzZmYjEzYzc%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D54c3ed6bfe0f45ab6c0fcb44c5b820b3)