SVG
Scalable Vector Graphics
Libraries¶
- Snap.svg
- The JavaScript SVG library for the modern web.
- svg.js
- A lightweight JavaScript library for manipulating and animating svg
- CairoSVG
- CairoSVG is a SVG converter based on Cairo. It can export SVG files to PDF, PostScript and PNG files.
- Segment
- A little JavaScript class (without dependencies) to draw and animate SVG path strokes
まとめ¶
- 今年こそついにSVG元年？まだ間に合う！SVGの学習に役立つサイト紹介 - 聴く耳を持たない(片方しか)
- SVGを制作できるアプリ,お絵描きソフトを徹底的に調べました！ 114個 - 聴く耳を持たない(片方しか)
- マークアップ・エンジニアのためのSVG入門 - SVGコードの基本 | CodeGrid
株式会社ピクセルグリッドによるシリーズ記事（有料購読） - SVGを使いこなすための便利ツールいろいろ | Webクリエイターボックス
- Webグラフィックをハックする（2）：10分でわかるSVG 基礎編 (⅕) - ＠IT
Articles¶
- 幾何学的で美しいSVGパターン画像を生成する『GeoPattern』の紹介 - syonx
- 東京の鉄道路線図SVGを作りました＆パブリックドメインで配布します - Liner Note
- SVGはFlashの代わりにはなりません、なりませんよ。 - 週刊SVG
- SVGでプログラマブルな書体を作る話 | dwango creators' blog（ドワンゴクリエイターズブログ）
- Bezier Curves from the Ground Up
Tips¶
- Retina対応にSVGは本当に使えるのか？ – Rriver
- アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう | Webクリエイターボックス
- SVGアイコンを実用するために知っておきたい、リンク周りの記述方法 | Webクリエイターボックス
- SVGクリッピングマスクにチャレンジ！静止画像も動画も、SVGで切り抜こう！ | Webクリエイターボックス
- 球面パーティクル (SVG） - jsdo.it - Share JavaScript, HTML5 and CSS
- Elastic SVG Elements | Codrops
- PDF 2 SVG Converter
- HTML5 と SVG で考える、これからの画像アクセシビリティ
- How to work with SVG icons
- SVG Textのtext-anchor属性をつかってみた。 | CreativeStyle
- インラインSVGがボケる場合への対処
- javascript - D3 Appending Text to a SVG Rectangle - Stack Overflow
- 図形とテキストをセットにしたい場合は
sg要素でくくる
Convert Text with font to Outline¶
# Mac
$ /Applications/Inkscape.app/Contents/Resources/bin/inkscape -z -T -f ~/sample.svg -l ~/out.svg
- php - Converting text into path (svg) on server? - Stack Overflow
- Inkscapeで描いた画像をpngにバッチ変換する - Qiita
- Inkscape - an SVG editing program. | Inkscape
- https://hub.docker.com/r/rasch/inkscape/
- 任意のフォントを使ってDocker上でサイトのスクリーンショットを取りたい - Qiita
SVG Browser Support¶
Generator¶
- Trianglify by @qrohlf
- Poly Maker
- SVGをアップして継ぎ目なしのデザインパターンを作ってくれる『Plain Pattern』 | IDEA*IDEA
- ZorroSVG - Put a Mask on it
透過PNG画像を jpeg + SVG filter に変換して軽量化