SVG In OpenType: A New Approach To SVG Fonts
Eyes Above The Waves Robert O'Callahan. Christian. Repatriate Kiwi. Hacker. Archive 2025 June Not Joking About AI Building A PC April Rakiura Northwest Circuit February Tongariro Northern Circuit 2025 January Pararaha Valley 2025 2024 December Mt Arthur/Tablelands/Cobb Valley November Queen Charlotte Track 2024 October Auckland Half Marathon 2024 Advanced Debugging Technology In Practice June Waih
ドット絵におけるsvgのパフォーマンス検証
ここ数日ドット絵からsvgを生成するスクリプトを書いていたのですが，一点気になることがありました．生成するsvgの内容によって描画パフォーマンスに驚くほどの差が出たのです．となればその差はどこから生まれているのかに興味が湧いてきます．そこで今回はsvgの描画パフォーマンスについて検証してみましょう． ※検証コードへのリンクを追加しました． ドット絵をsvgに変換する意義 ドット絵と言えば，かつてファミリーコンピュータを代表とした家庭用ゲーム機におけるグラフィック表現として標準的なものでした．昨今では3dを主体としたグラフィックが主流となってしまいましたが，ドット絵のもつ独特な味わい深さから，今日でも一表現手法として様々な場面で利用されています． さて，本来ドット絵はラスタ画像として扱われることが多いのですが，これをsvgとする意味はあるのでしょうか？実は有るのです． ドット絵の特徴として，
SVGの次のお話
Life with Web Browser Engine (Gecko, WebKit and etc), Mobile and etc. 来年の1月か2月のオーストラリアのF2Fミーティング以降にたぶんSVG 2.0のワーキングドラフトが更新されるらしいんだけど、今日はそれのお話。語られることないんで書いてみる。 HTML5だCSS3だって話がいろいろ聞かれるけど、SVGもやっと2.0の話がぼちぼち出てきてる。SVG自体は元から日本人とかが絡んでるってのをみんな知らなかったりする。キャノンの藤澤さんが元々仕様策定に絡んでいたりしたんだけど、2.0だとKDDI(もちろん日本のね！)が仕様策定に絡んでたり (次の更新の際にはエディタに入るんじゃないかな?)。 SVG 1.1とかを制定したときと比べて今一番違うところは、HTML5やCSS3を通った後ってところ。現在の状態だと、CSSとSVGで
SVGで図形やアニメを描画してみよう
SVGフィルタの基礎 SVGのようなベクトルグラフィックスは図形を組み合わせて全体を構成していくため、どうしても輪郭のはっきりした画像になります。グラフや略図のようなものであれば問題ありませんが、凝ったイラストを描くにはどうしても限界があるでしょう。 こうした欠点を補うのが「SVGフィルタ」です。その名前のとおり、Photoshopなどのグラフィックツールによくあるぼかしや色変換などのフィルタをSVGの描画結果に適用する機能です。 SVGフィルタの使い方は、前回取り上げたグラデーションとよく似ています。filterタグを使ってあらかじめフィルタリングの内容を定義しておき、適用先の図形のfilter属性でそれを参照します。以下は単純なぼかし（ガウシアンブラー）フィルタを適用する例です。 このように、SVGフィルタではfilterタグ内に各フィルタに対応するタグを記述することで、適用する効果を
Scalable Vector Graphics (SVG) 2 (W3C Working Draft 28 August 2012)
Scalable Vector Graphics (SVG) 2 W3C Candidate Recommendation 04 October 2018 This version: https://www.w3.org/TR/2018/CR-SVG2-20181004/ Latest version: https://www.w3.org/TR/SVG2/ Previous version: https://www.w3.org/TR/2018/CR-SVG2-20180807/ Editors draft https://svgwg.org/svg2-draft/ Single page version: https://svgwg.org/svg2-draft/single-page.html GitHub repository: https://github.com/w3c/svg
SVGよりアイコン・フォント！ な理由
両者は共にスケーラブルなもの(にできるもの)なのでその点では互角だけど、様々なプロパティーを持ち多彩な表現が可能なSVGの方がフォーマット的には優位にあると言って良い。が、なかなか利用が広まらないSVGに対して、アイコン・フォントの利用は急速に拡大している。単に流行りとみなす向きもあるけど、やっぱりそれなりに理由があるのではないかと思う。 CSSとの親和性 特に以下の3つのCSSプロパティーは効果的に使える。 font-size color text-shadow PNGで作られたアイコンの色を変更するには編集が必要だけど、アイコン・フォントはCSSファイルで自由に色を調整することができる。独自実装も含めるなら-webkit-maskプロパティーもとても(想像以上に)効果的に使うことができる。他にもちょっとした位置の調整やなんかも慣れ親しんだCSSで普通に可能。更にこれらをHTMLファイル
才色兼備なグラフィックス SVG が魅せる Web の未来
SVG が魅せる Web の未来 Firefox Developers Conference 2012, Osaka Brian Birtles 皆さま、こんにちは。Mozilla Japanのブライアンと申します。 今日は「才色兼備なグラフィックス」というテーマで話させていただきたいですが 最初に短い自己紹介をさせていただきます。 今日のテーマと打って変わって、私は才色兼備ではもちろんなくて、 グラフィックスについて話すくせに、デザイナーでもありません。 実は高校のとき、デザイナーになりたかったんですが、センスがなくてあきらめました。 それから、ウェブ開発もあちこちやりましたが、それも以外に難しかったです。 でも、私が悪いと思わなくて、ウェブが悪いと思いましたので、 ウェブを改善するため、2004年にボランティアとしてFirefoxの開発に参加し始めました。 今はMozilla J
)
フィルター効果 - SVG - Windows Internet Explorer 10 Release Preview 開発者向けガイド
Internet Explorer 10 and Windows apps using JavaScript introduce support for Scalable Vector Graphics (SVG) filter effects. SVG filters enable you to manipulate graphics—similar to what you might do with an application such as Adobe Photoshop—directly in the browser. Consider the following SVG graphic. Using SVG filter elements, this simple graphic can easily be transformed into a much more visual
svg要素の基本的な使い方まとめ
この文書ではsvgをhtml埋め込みデータとして扱う際の覚書として作成した．svgの要素と属性は実際の例を踏まえて説明したつもり． 注意事項 仕様はここを参照のこと． 本文書では実際の挙動を調べつつ自分なりの解釈が入っているため，多々間違いが入ってしまうかもしれないが，気にしない． スクリプトを使ってsvg要素の中身(ソース)を出力しているため，一部実際のコードと表示されるコードとの間に差異があるが，予めご了承いただきたい． 目標は見栄えのする図形をsvgの手入力でサラっと記述できるようになることなので，複雑な図形は素直にinkscape等専用のツールを使うと良い．ただ，ここで示したことはツールを使う上でも役に立つと思う．特にアニメーションなど． svg:ベクター画像のカンバスの定義，title:タイトル，desc:説明 html文書においてsvg画像を挿入したい場合,embed要素を用い
HTML -> CSS -> SVG -> CSS
HTMLで参照しているCSSでSVGを参照する……まではマイナーとはいえ使っている人はいると思う。これでまぁスケーラブルな画像という条件は満たせるのだけど、せっかくSVGではCSSを参照できるのだから、そのCSSでSVGのスタイルも指定できたら色々便利でリソースの節約にもなるんじゃないかという実験……が失敗に終わった話。タイトルわかりづらい。 Demo: HTML -> CSS -> SVG -> CSS SVGでCSSを使う方法は簡単で、<?xml-stylesheet?>を使うだけ。CSSでスタイルを書きやすくするためid属性を指定しておくと良い。 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml-stylesheet type="text/css" href="test.css"?> <svg id="foo"
The WHATWG Blog — WHATWG Weekly: Path objects for canvas and creating paths through SVG syntax
Please leave your sense of logic at the door, thanks! WHATWG Weekly: Path objects for canvas and creating paths through SVG syntax March 14th, 2012 by Anne van Kesteren in Weekly Review Jonas Sicking proposed an API for decoding ArrayBuffer objects as strings, and encoding strings as ArrayBuffer objects. The thread also touched on a proposal mentioned here earlier, StringEncoding. This is the mid-
引用符をSVGに
blockquote要素に付けている飾りの引用符をSVGでやることにした。フォントだとサイズ(特に横幅)を合わせるのが難しいので。アイコンみたいなコンテナー要素のサイズに合わせてぴったりサイズを縮小拡大したい場合はSVGが最適解だと思う。もののついでにhr要素もSVGで書き直した。 Demo: Quote SVG デモでは黒の不透明にした。path要素のstyle属性でfillとopacityプロパティーを使って色は調整できる。あとはこれをData URIスキームを使ってCSSに埋め込めば良い。 blockquote::before { margin-right: 1em; display: block; position: absolute; right: 100%; width: 2em; height: 2em; background-image: url("data:image/s
Dive Into SVG
7. <path d="..." transform="translate(30,30)"/> <path d="..." transform="scale(1.5)"/> <path d="..." transform="rotate(30,0,0)"/> <path d="..." transform="skewX(45)"/> 2011 8 21 8. <path d="..." transform="translate(30,30)"/> <path d="..." transform="scale(1.5)"/> <path d="..." transform="rotate(30,0,0)"/> <path d="..." transform="skewX(45)"/> 2011 8 21 9. <path d="..." transform="translate(30,30)
SVG2 Planning Page - SVG
Introduction This page captures requirements input for the SVG 2.0 effort and ownership for the different effort. The intent of the Working Group is to use this document to list and prioritize requirements for the new SVG 2.0 features and identify owners for the different activities. This page also tracks the milestones for the SVG 2.0 effort. Milestones Milestone Description Responsible Target Da
SVGヤバイ - 最速チュパカブラ研究会
canvas を苛めていたら気づいたことがあったので書きます。（この記事は2011年5月現在の情報です。あなたがこの記事を読んでいる時点で、より新しくて良い方法が無いか確認して下さい） 基本的な話 canvas には、図形を描画する機能だけでなく、描かれている内容を読み取る機能があります。getImageData を使うと、canvas の内容をピクセル単位で読み取って画像処理をかけたりできます。また、toDataURL を使うと canvas の内容を Data URI として出力でき、サーバに送信したりできます。 しかし、この機能にはリスクがあります。例えば、悪意のあるページを開いただけで、社内SNSにしか公開していないあなたの顔写真を canvas 経由で抜き取られるかもしれません。そういう事が起きないように、他のサイトから読み込んだ画像が canvas に描画されている場合（以下、
2011年はSVG元年に。デザイナー大注目の画像フォーマット「SVG」の特徴を一気におさらい。
MIX11で「SVG女子」が紹介されました！ 弊社が制作をさせていただいた「SVG女子」が先日ローンチし、MIX11で大きく取り上げられました。 こちらがその様子です。 日本上陸は4/26！「SVG女子」をより楽しむために、まずはSVGについて知っておきましょう。 それでは続きからどうぞ！ SVGの気になる疑問に答えます！ SVGって何？ SVG（Scalable Vector Graphics）は、XMLによって記述されたベクターグラフィック言語のこと、あるいは、SVGで記述された画像フォーマットのこと。W3Cでオープン標準として勧告されている。 Scalable Vector Graphics - Wikipedia 簡単に言うと、ブラウザで表示できるベクター画像のフォーマットです。 SVGって何がすごいの？どういうところが便利なの？ ベクターデータなので拡大しても荒れません。 例えば
SVGで笑い男 - jsdo.it - Share JavaScript, HTML5 and CSS
http://jsdo.it/sonji07/zdTL に対抗してSVGでやってみた。 Firefox4ならアニメーションするよ。 ChromeだとanimateTransformに対応していないのか動かないけど。 <svg viewBox="0 0 400 360" width="400" height="350" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <path id="eye" d="M-22,10 A40,40 0 0,1 22,10 A22,22 0 0,0 -20,10Z"/> <path id="circle_text" d="M50,180 a130,130 0 1,1 260,0 a130,130 0 1,1 -
SVGを高速化させるためのルール - プラグインレスでSVGを表示する「SIE」開発ブログ
SVGを高速に表示させるためには SVGを速く、さくさくと表示させるには、いろんな方法があるのですが、ここで、まとめてみましょう。以下のルールに従えば、性能の向上ができると思います。 use要素とsymbol要素は必ず避けること use要素とsymbol要素は、Flashで使われる「シンボル化」と違って、内部でかなり複雑な変換をしています。 動的な変更があるたびに、この複雑な変換をしますので、描画処理の性能が落ちてしまいます。 重たくなりますので、必ず、この二つの要素は避けましょう。 アニメーションの期間は短く設定すること dur="5s"などの設定をよく見かけますが、これはとても遅く感じられます。setInterval(f, 200)も同様です。 目の「まばたき」が125ミリ秒ぐらいなのですから、下手をすれば、まばたきをしても絵が動かない、「もっさりとした」アニメーションができあがります
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Mozilla Connect
https://dev.w3.org/SVG/modules/integration/SVGIntegration.html