Forking Chrome to turn HTML into SVG - Fathy Boundjadj
Forking Chrome to turn HTML into SVG November 11, 2022 I've been working on a program called html2svg, it converts web pages to SVG. It's based on a fork of Chromium to support modern web standards. This post explains most patches. Take a picture SkiaBlinkPDF<div style="width: 50px; height: 50px; background: red" />canvas->drawRect(0, 0, 50, 50, SkPaint { .fill = SkColor::Red })(GPU)GaneshRaster(C
目指すのはぶっちぎりの速さ! なぜ HTML5 版CacooはSVGを採用するのか | 株式会社ヌーラボ(Nulab inc.)
こんにちは！ Cacoo チームの中原です。現在CacooチームはFlashで作られている図の編集画面(以下エディタと表現します)を* HTML5 で置き換える開発を進めています。このブログでは、 HTML5 版 Cacoo で図形の描画に使用される、SVGを選択した理由と経緯について説明したいと思います。 （*置き換える理由については「Good-Bye Flash ~ CacooはHTML5で生まれ変わります」をご覧ください） どの技術を使って図形を描く?重視したのは「パフォーマンス」 図形の描画にどんな技術を使うか。いくつか候補を上げました。 2D Canvas 3D Canvas (WebGL) SVG (これ以外に、Unityという意見もありましたが今回はWeb標準技術を使うことを前提にしました。) さて、どれを使おう。私たちがどの技術を選択するのか、基準を決める必要があります。そ
flowchart.js
st=>start: Start:>http://www.google.com[blank] e=>end:>http://www.google.com op1=>operation: My Operation sub1=>subroutine: My Subroutine cond=>condition: Yes or No?:>http://www.google.com io=>inputoutput: catch something... para=>parallel: parallel tasks in=>input: some in out=>output: some out st->op1->cond cond(yes)->io->e cond(no)->para para(path1, bottom)->sub1(right)->op1 para(path2, top)->o
【追記あり】SVGコードゴルフと,GIZMODO「Google新ロゴ」記事へ反論 - 聴く耳を持たない(片方しか)
＜ここから追記：2015-09-10＞当初投稿した内容が、前提から誤った思い込みで書かれておりました、詳しくは後半の追記を参照してください。 ＜／追記ここまで＞ はじめに先日こうしたツイートが話題になりました。 https://twitter.com/thespite/status/639107572679712772 これは先頃リニューアルが発表されたGoogle社のロゴ Evolving the Google Identity - Library - Google Design がシンプルな構成に見えることから、それを荒く手軽に作るなら（quick and dirty version）290バイトで作れるよ！という内容です。 リンク先の中身を見てみるとこのような490バイトのSVGファイルになっており <svg xmlns="http://www.w3.org/2000/svg" wi
Two.js
TIP Prior to v0.7.0-alpha.1 Two.js requires Underscore.js and Backbone.js Events. If you're already loading these files elsewhere then you can build the project yourself and get the file size even smaller. For more information on custom builds check out the source on github. # Overview Overview # Focus on Vector Shapes Two.js is deeply inspired by flat motion graphics (opens new window). As a resu
10分でわかるSVG 基礎編
知って得する、Webブラウザ上で利用できるグラフィック関連技術。HTMLのような感覚で図形が描画できる「SVG」をハックしよう SVGドキュメントの書き方 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。第2回となる今回のテーマはSVGです。 ご存じの方も多いと思いますが、SVGはXMLをベースにしたベクトルグラフィックスの記述言語です。PNGのような画像フォーマットの1つでもありますが、実際にはXMLを記述したテキストファイルであり、HTMLと同様にJavaScript（DOM API）による制御も行えます。HTMLがタグによって文書の構造を記述するのと同様に、SVGはタグで図形を記述します。 ■ XMLでベクトルグラフィックスを記述するSVG 実はSVGの規格自体はかなり以前から存在したのですが、長らくInternet Explorer（以降IE）
大画面スマホも怖くない！SVGスプライトの作り方 | SONICMOOV LAB
最近になって、SVGを利用しているサイトさまをよく目にするようになりました。 それもこれもiPhone 6 Plusという画面サイズのどデカい問題児の存在が影響し ています。 なんとこいつだけ今までと違いピクセル比が3倍なのです。 今までretina対応で通常の2倍サイズの画像を書き出していましたが、ついに3倍サイズの画像を書き出さねばならぬ時代がやってきたわけです。 2倍サイズの画像でもスマホサイトなんかは容量的にもかなり無理があったのに、3倍サイズ画像とか現実的じゃ無いですよね… そこでベクターグラフィックのSVG画像の登場です。 そもそも、拡大を想定した画像にしておけば解像度なんかキニシナイでいいのです。 今回は、基本的なSVGの作り方、スプライトの作り方、ほんのちょっとしたテクニックまでをご紹介します。 目次 基本的なSVGの作り方 SVGスプライトの書き方 画像の呼び出し方 色を
マークアップ・エンジニアのためのSVG入門 | 第1回 SVGコードの基本
マークアップ・エンジニアのためのSVG入門 第1回 SVGコードの基本 この記事ではまずSVGのコードとしての基本と、さまざまな実装方法を概観してみましょう。それぞれの特徴を捉えられると、実装方法の選択が適切にできます。 はじめに SVGは、Android2.0系やIE8では対応していませんので、今の段階で気軽には使いづらい技術です。しかし、iOS Safari向けのWebページなど、限られた環境に向けては効果を発揮します。今回はマークアップエンジニアが知っておくべきSVGの仕様や使い方を見直してみましょう。 画像でありテキストである 「SVG＝スケーラブルなベクター形式」は、SVGの大きな特徴です。このことは多くの人が認識しているでしょう。 ラスタ形式は特に拡大に弱く、拡大するとドットが目立つ。一方、ベクター形式は拡大しても画像の劣化はない。 SVGにはソースコードが存在し、これにより画
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 と SVG で考える、これからの画像アクセシビリティ