SVGのViewBoxがよく分からないアナタとワタシへ - Qiita
SVGのViewBoxって何だか分かりにくくないですか？ ・・・ やっぱりそうですよね。私も色々な解説ページを見ても、結局よく分かりませんでした。 そこで、値と動作をリアルタイムで簡単に確認できるページがあれば、感覚的に理解できるのではないかと思い、作成してみました。ViewBox理解の補助になれば幸いです。 SVG ViewBoxの動作確認 http://nekoneko-wanwan.github.io/demo/svg/viewbox/ 以下、個人的なポイント 実際のサイズをviewPortと呼び、viewBoxはviewPortにおける位置を指す viewBox =(x, y, width, height)のx,yは左上の座標を、width,heightは右下の座標を決める viewPortのwidth, heightとviewBoxのwidth, heightがずれると見た目上の
SVG For Web Designers (and Developers)
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJSDeepak Upadhyay
Android 5.0からSVG準拠のdrawableが書けるようになりました - agri-note inside
こんにちは、Androidチームの中川@Nkznです。 Android Studio 0.8.14のリリースノートを見ていて知ったのですが、LollipopのAPI Level 21では<vector>などのdrawable系タグが拡充されたのですね。 名前的にベクターイメージが書けそうですが、実際何ができるのだろうと思って調べてみました。 Working with Drawables | Android Developers Vector images are represented in Android as VectorDrawable objects. For more information about the pathData syntax, see the SVG Path reference. <vector>の中に書く<path>タグのpathDataの記法が、SVG準拠
Advent Calendar 3日目:SVG画像を1バイトでも削るためのコードゴルフ - 聴く耳を持たない(片方しか)
このエントリーはGraphical Web Advent Calendar 2013 への参加記事です。 今日は12月3日、ということで Advent Calendar の3日目は私id:rikuoが担当します。今回はSVG画像ファイルを1バイトでも削るためのコードゴルフのTipsを紹介していきます。 コードゴルフって？ まずコードゴルフとはなにか？の説明から。 コードゴルフとは任意のソースコードを出来るだけ短く書くことを目的にしたものです。そのコードの動作を損なわなず、かつ可能な限り短縮して記述する手法を試行錯誤していく様子が、ゴルフのように少ない打法で競うところに似ていることからこのように呼ばれています。 またそれを競技としたコンテストも催されていますね。 画像のファイルサイズ低減策 JPEG、GIF、PNGといったビットマップ画像であればファイルサイズを低減する方法やソフトウェア・ツ
What is SVG? [Guide to SVG Part 1]
SVG (Scalable Vector Graphics) is a very useful tool for drawing shapes and figures with simple code. It is probably one of the most useful tools that web designers are hesitant to use, although once you understand it, you’ll wonder how you lived without it! In this series we’ll be going through the basics of SVG, including how to use it and what it can do for you. This article is part of a series
![What is SVG? [Guide to SVG Part 1]](https://cdn-ak-scissors.b.st-hatena.com/image/square/dccc8d621d7f5ad7eaeaaf7181d1024dd884991f/height=288;version=1;width=512/https%3A%2F%2Fwww.html5canvastutorials.com%2Fblog%2Fwp-content%2Fuploads%2F2012%2F12%2Fsvg-icon.gif){kind=icon}
才色兼備なグラフィックス SVG が魅せる Web の未来
SVG が魅せる Web の未来 Firefox Developers Conference 2012, Osaka Brian Birtles 皆さま、こんにちは。Mozilla Japanのブライアンと申します。 今日は「才色兼備なグラフィックス」というテーマで話させていただきたいですが 最初に短い自己紹介をさせていただきます。 今日のテーマと打って変わって、私は才色兼備ではもちろんなくて、 グラフィックスについて話すくせに、デザイナーでもありません。 実は高校のとき、デザイナーになりたかったんですが、センスがなくてあきらめました。 それから、ウェブ開発もあちこちやりましたが、それも以外に難しかったです。 でも、私が悪いと思わなくて、ウェブが悪いと思いましたので、 ウェブを改善するため、2004年にボランティアとしてFirefoxの開発に参加し始めました。 今はMozilla J
SVG in Dart
SVGSamples.dart `�r�VU i�VU #import('dart:html'); class SVGSamples { void run() { drawlines(); } void drawlines() { final int maxY = 250; final int maxX = 500; final int step = 10; var svgGroup = new SVGElement.tag("g"); svgGroup.attributes["transform"] = "translate(0,$maxY) scale(1,-1)"; for(int i=0; i<(maxX/step); i++) { var xAxis = new SVGElement.tag("line"); xAxis.attributes = { "x1": i*step
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - alexjlockwood/ShapeShifter: SVG icon animation tool for Android, iOS, and the web
mdaines/viz.js: A hack to put Graphviz on the web.