マークアップ・エンジニアのためのSVG入門 | 第1回 SVGコードの基本
マークアップ・エンジニアのためのSVG入門 第1回 SVGコードの基本 この記事ではまずSVGのコードとしての基本と、さまざまな実装方法を概観してみましょう。それぞれの特徴を捉えられると、実装方法の選択が適切にできます。 はじめに SVGは、Android2.0系やIE8では対応していませんので、今の段階で気軽には使いづらい技術です。しかし、iOS Safari向けのWebページなど、限られた環境に向けては効果を発揮します。今回はマークアップエンジニアが知っておくべきSVGの仕様や使い方を見直してみましょう。 画像でありテキストである 「SVG＝スケーラブルなベクター形式」は、SVGの大きな特徴です。このことは多くの人が認識しているでしょう。 ラスタ形式は特に拡大に弱く、拡大するとドットが目立つ。一方、ベクター形式は拡大しても画像の劣化はない。 SVGにはソースコードが存在し、これにより画
Snap.svgの使い方まとめ
Snap.svgの使い方 まとめ How to useすなっぷ.svg タイトル svg要素の基本的な使い方まとめ・別館 written by DEFGHI1977@xboxlive 本記事ではsvg世代のjavascriptライブラリとして有望なSnap.svgの使い方について実際に動作しているサンプルを交えて解説しています（これは動作サンプルであると同時にテストコードと言えるものですね）．なお間違いがあったり，バージョンアップに伴う不整合が発生するかも知れませんので，その点ご容赦下さいね．やっぱり手でゴリゴリ書いてます． なお，Snap.svgを用いたSVG(もしくはjavascriptの)入門記事ではありません．Snap.svgを上手く活用したいのであれば，背後で動いているsvgについてよく知っている必要があります．そのため，ある程度SVGやプログラミングの知識があることを前提に話を
librsvg - Wikipedia
librsvgはGNOMEプロジェクトの一部で、オープンソース SVG レンダリングライブラリである。ライセンスはLGPLライセンス。 librsvgはバージョンv2.13.0.から第一バックエンドとしてCairoを使用している。 librsvgはGNOMEデスクトップで使う為に開発されたが、拡張グラフィックSVGフォーマットをサポートする他の多くのアプリケーションにも内蔵されている。 ウィキペディアはSVGレンダリングにlibrsvgを使用している。[1] 参照[編集] ^ http://www.mediawiki.org/wiki/Manual:Image_Administration#SVG 外部リンク[編集]
SVGMagic - Great jQuery SVG fallback plugin
SVGMagic: the fully automated SVG fallback SVGMagic is a simple jQuery plugin that searches for SVG images (including background- and inline dataimages) on your website and creates PNG versions if the browser doesn't support SVG. Wondering why you should use SVG images? SVG images are vector based! Meaning that they will be as sharp as hell no matter how big they are. In other words: one file for
SVG女子を90%軽くしたSVG軽量化テク+α #svggirl
あいつ仕事してないで女の子のイラストばっかりいじってるぞと陰ながら言われていた喜納です。 HTML5で動くSVGアニメーション「SVG女子」がラスベガスでのマイクロソフト基調講演MIX11で公開され、 世界を（いろんな意味で）驚かしてきましたが、 ついに本日、日本でも公開されました！ しかも日本版に合わせてアニメーションも長くなっています！ こっそりブラウザを英語にして見ていた人も必見です！ （神風動画さんによる予告編動画！） 神風動画さんによるハイクオリティアニメーションをSVGで再現すると言う試み、 プログラムについては SVG Girlの公開と内部実装（プログラマーブログ） で担当プログラマーの吾郷が説明していますが、とにかく いかにSVGをきれいに軽くするかが最重要！ SVGといえば拡大しても荒れる事の無いベクター形式で、pngよりも軽くつくれたりすることで使われていますが、 今回
SVG に JavaScript を埋め込む方法 - Qiita
SVG は内部に JavaScript を埋め込むことができる。 SVG ファイル内への JavaScript の記述例 以下の SVG をブラウザで開くと埋め込んだ JavaScript が実行される(Safari, Chrome で確認)。 表示されている図形をクリックするとランダムに色が変わる。 <?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" width="400pt" height="400pt"> <sc
Snap.svg - The JavaScript SVG library for the modern web.
Why SVG (and Snap)? SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM. Modern features for modern browsers Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking
SVGのテキストとMedia Queries | 水無月ばけらのえび日記
公開: 2012年2月13日16時10分頃 最近、SVGを使うことが多くなってきたのですが、テキストの処理がHTMLとは少し異なり、やや癖があります。そのあたりを少しメモしておきます。 テキストの改行HTMLの場合は、要素内に適当にテキストを書くと、その要素の中にテキストが表示されます。要素の幅に対して長いテキストが入った場合は、テキストは自動的に改行されます。 SVG1.1の場合、テキストを置くにはtext要素を使い、text要素自体にx属性、y属性で座標を指定して配置します。この要素には幅という概念がなく、テキストが自動で折り返されることはありません。SVG1.1では「自動改行はない」という旨がはっきり書いてあります。 SVG performs no automatic line breaking or word wrapping. To achieve the effect of m
SVG with Javascript習作 - Kengo's blog
SVG女子が話題を呼んでいることもあり、連休中にSVGに触れました。作ったのはJavascriptで動的に図形を描画したり動かしたりするもの。ジャンルとしてはSRPGやタワーディフェンスゲームに近いと言えます。 forked from: SRPG Map (Hex, SVG) - jsdo.it - share JavaScript, HTML5 and CSS その他にもいくつか書きましたので、興味をお持ちの方はご覧いただけると嬉しいです。 http://jsdo.it/eller86/bCQH http://jsdo.it/eller86/4pKB http://jsdo.it/eller86/qcC9 以下、気づいたことをメモしておきます。なお開発環境はMac OSX 10.6.7 + Chrome 11.0.696.65でした。 SVGはjQueryとの相性が悪い 今回はjQuer
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
svgで徐々に描かれるテキスト - jsdo.it - Share JavaScript, HTML5 and CSS
GitHub - RazrFalcon/svgcleaner: svgcleaner could help you to clean up your SVG files from the unnecessary data.
http://build-podcast.com/svg/
501421 - Implement getIntersectionList(), getEnclosureList()
http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_05.htm
SVG 1.1 2nd Edition Test (<object>): painting-marker-01-f.svg
Outline a group of touching shapes with SVG
http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_08.htm
How to get the width of an SVG tspan element
Ben McMahen - Blog
GitHub - flying-sheep/SWF2SVG: AIR app to convert SWF shapes to SVG images
