「10分でわかるSVG 応用編」サンプル
<g fill="#c44" stroke="#822" stroke-width="2"> <circle cx="32" cy="32" r="30" /> <rect x="40" y="30" width="80" height="50" /> </g> <g id="s02"> <circle cx="32" cy="32" r="30" fill="#c44" /> <rect x="40" y="30" width="80" height="50" rx="10" ry="10" fill="#44c" /> </g> <use x="140" y="0" xlink:href="#s02" stroke="#ccc" stroke-width="2" /> <symbol id="s03" viewBox="0 0 120 80"> <circle cx="32" cy="
Adobe Illustratorで描いたイラストをSVGで実装する方法 - Hatsuka
SVG Advent Calendar 2015 10日目の記事です。 先週も別のAdvent Calendarに参加していたのですが、先月参加したリクリイベントでSVGについてちょっと勉強したこともあり、こちらのカレンダーにも参加してみることにしました。 今回はリクリで教わったことをベースに、データの作成からサンプル作成までの流れをざっくりと書いてみます。 SVGって？ XMLをベースにした、ベクター画像フォーマットです。 ベクター画像なので、拡大してもきれいなため、高解像度端末でもきれいに見えます。 対応環境 IE9～、Android3～で対応しており、その他のブラウザも最新版であれば問題なく表示されます。 （ちなみに、ChromeよりもIEの方がSVGのレンダリングがきれいだそうです。） 埋め込み方 埋め込み方は大きく見ると4つほどあります。 1.img要素としてHTMLに埋め込む
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SVGでアニメーション（中編） | YUIDEA WEB