--- title: SVGは思ってたより怖くなかった。インラインSVGのススメ tags: SVG HTML CSS author: y_hokkey slide: false --- 最近SVGに初めて触れる機会があり、それまで抱いていたイメージとは大きく違ったものだという感想を持った。この記事では、これまでSVGに触れたことのない人向けに「SVGのそんなに怖くないところ」を紹介する。 # SVGになんとなく抱いていた印象 * ベクター形式のなんかよく分かんない画像まわりの最新技術 * 仕事で実用するには新しすぎる * 使いこなすには何か高度で新しい技術を勉強しないと無理 * 中を覗くと数字がたくさんあって難しそう。算数嫌い ```xml ``` ```html:index.html ... ...
... ``` # 参考サイト 日本語のドキュメントも充実してきているので、分からないことがあっても結構調べられた。 * [svg要素の基本的な使い方まとめ](http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_05.htm) * ここさえ読めばほとんどのことはできそうなくらいよくまとまっているページ。しかも日本語 * [マークアップ・エンジニアのためのSVG入門 - SVGコードの基本 | CodeGrid](https://app.codegrid.net/entry/svg-basic) * [SVGアニメーションの現状 | プログラミング | POSTD](http://postd.cc/the-state-of-svg-animation/) * 本稿では触れていない、SVG独自のアニメーション表現が紹介されている * [見た目のクオリティはそのままで、SVGファイルを大幅に軽量化する便利ツール -SVGO GUI | コリス](http://coliss.com/articles/build-websites/operation/design/optimizing-svg-files-svgo-gui.html)