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
Excelシートを憎み、愛した男 - No Regrets in Bathing
Excelシートが憎い。 Excelシートでの書類作業の辛さは言わずもがな。 データベースもどき アプリもどき 帳票出力 Excelシート上でのコーディング エビデンス作成 UMLなど 以上のものについて、すべてExcelでの作成経験がある。あの世にもExcelシートを作らされる地獄がきっと存在するだろう。 Excelシートが憎い。Excelの万能性ゆえ、落とし込まなくていいものまで落とし込まれ、地獄を生み出す。みんなExcelなら慣れてるので、その他の選択肢は選ばれない。何度かMarkdownからExcelにコンバートするようなツールを書いたけれど、書式が変われば捨てざるを得ない。結局今もExcelを書き続けている。辛い。 でも待って欲しい。あれほど一括編集をエレガントにこなせるUIが他にあるだろうか（２大エディタに習熟した場合を除く）。図も書ける。式は素人でも使えるが、プログラミングの
svg要素の基本的な使い方まとめ
3.図形の描画と図形のグループ化 SVGにおいてはグラフィック描画の手続きをXMLツリーとして表現する．様々な要素の組み合わせで複雑なグラフィックを構成するのだ．本項では最も基本のpath要素とその他の基本図形要素，及びg要素による図形のグループ化について説明する．これらの要素はSVGを表示可能な全ての環境で動作し，簡単なグラフィックであればこれだけで十分に間に合う． path:パス図形の描画 path要素は任意の図形を表す．図形定義が柔軟に行えるが，円や四角などの単純な図形を描画するだけなら後述する専用の要素を使ったほうが良い． パス図形の定義 d属性には曲線を引く際のコマンド(パスコマンド)のリスト(パスデータ文字列)を指定する．パスデータ文字列の前から順にコマンドを実行し，得られた(曲)線に囲まれた領域をパス図形と呼ぶ．SVGにおけるグラフィックはこのパス図形を元に描画される． d属
岡田を切る技術 - Qiita
これはとある回顧録 何度も諦めかけましたが、数年の歳月を経て遂に岡田を切る技術が一旦の完成へと至りました。その技術を巡る奮闘の歴史と成果について、ここに記録を残していきたいと思います。 画像時代 まずは「切る」という動作が何を指すかを明確にしておきます。 厳密な定義というよりは、切った感を得るために必要そうなふるまいとして定義します。 平面上のある領域が、任意の直線を境界として分割されること 分割された領域は物理法則に準じてふるまうこと 要するに気持ちよく岡田を切ることができれば目標は無事達成です。 物理エンジン 切った感を高めるためにはやはり「物理法則」に準じたふるまいが欲しくなります。つまりブラウザ上で動く物理エンジンが必要です。 世の中にはフルスクラッチで物理エンジンを作れる人間と作れない人間が居ると思われますが、残念ながら私は後者でした。勝ち目の薄い勝負は避け、素直に巨人の方にすが
FontAwesome を SVG で使用する【JavaScript なし】
はじめに「FontAwesome を JavaScript なしで使用する方法」または、「FontAwesome の一部のアイコンを使用する方法」です。 JavaScript 無効環境で FontAwesome を使用したページを閲覧すると文字化けしたような表示になるのを目にします。そうなるのを防ぐため、 FontAwesome を JavaScript なしで使用します。または、 FontAwesome は、使用しないアイコンも含めてすべてのアイコンを読み込むため、数個のアイコンのみを使用する場合、不必要なコストが掛かります。それを回避するため、必要なアイコンのみを読み込んで使用します。 FontAwesome は、上記の方法を PNG 画像でも実現できます。ですが今回は、後述する理由により SVG を利用して実現します。 ちなみに、 JavaScript 無効環境だと次のように文字化け
svg要素の基本的な使い方まとめ
11.画像効果 フィルター効果を用いることでそのままでは印象の薄い平面図形に様々な表情を持たせることができる．本項ではこのフィルター効果について説明する．SVGの持つ機能の中でも特に仕様が複雑なものの一つである． filter:画像効果 filter要素は図形に対しての視覚効果を表す．元の画像・図形を維持しつつ，見た目の変更・装飾を行えるため非常に魅力的な機能である．一般に画像はその構成する画素毎にrgb値と不透明度（alpha）値とを定めるが，filterはこの色に関わる4つの値を画素毎に編集するだけである．従ってサイズを変えたり回転させるといった画像の変形を伴う操作については原則transform属性を用いねばならない．なお，filterによる画像効果は暗黙的なラスタライズを引き起こし，本質的に重いため掛け過ぎてはならない．特にフィルターを掛ける領域が広くなるほど負荷が高くなる． fi
svg要素の基本的な使い方まとめ
9.グラデーションとパターン 見栄えの良いグラフィックには色のグラデーションは欠かせない．SVGにおいても然りで，本項ではこのグラデーション処理を表すグラデーション要素について説明する．また同様に塗りつぶしに利用されるsolidColor,pattern,hatch要素についてもここで取り上げる．なおこれらの要素による塗り潰し機構をSVGではペイントサーバと呼んでいる． グラデーションの基本構成 グラデーションは塗り潰しに用いる色を徐々に変化させることで，単色によるものに比べて滑らかな見た目をもたらす．グラフィックを描く場合には必須な機能であり，SVGにおいても帯状にグラデーションを掛けるlinearGradient要素と放射状に掛けるradialGradient要素, 及び不定形グラデーションを定めるmeshGradient要素の3つが提供されている． SVGによるグラデーションはCSS
商用利用無料！UIでよく見かけるかわいいアニメーションで動くSVGアイコンがコピペで利用できる -Potlab Icons
<svg version="1.1" id="icon-hearbeat" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="510px" height="510px" viewBox="0 0 510 510" style="enable-background:new 0 0 510 510;" xml:space="preserve"> <path d="M369.75,21.675c-43.35,0-86.7,20.4-114.75,53.55c-28.05-33.15-71.4-53.55-114.75-53.55C61.2,21.675,0,82.875,0,161.925 c0,96.9,86.7,175.95,219.3,29
Vue.js + SVG練習4 : クリックで音の鳴るピアノ鍵盤 - No Regrets in Bathing
SVGをグラフィックエディタでいじる方針のリベンジをしたかったので、今回は下記のようなピアノを作った。 下記から動いているところを試せる（音が出ます） hashrock-sandbox.github.io 前回Inkscapeで撃沈したあと、色々試した所、Method DrawというオンラインSVGエディタがだいぶ良さそうだった。 Method Draw 上記のグラフィックをサクッと作り、出力した結果が下記。 <svg width="20" height="100" xmlns="http://www.w3.org/2000/svg"> <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ --> <defs> <linearGradient id="svg_4" x1="0.410156" y1="
POKER369 - IDN POKER, Situs Judi Poker Online, DominoQQ & Ceme
Mencari situs poker online nomor satu di indonesia tentunya hanya ada di IDNPLAY yang menjadi agen resmi idnpoker terpercaya sejak tahun 2010. Yang sudah berpengalaman dalam melayani dan membantu ratusan ribu member bettor poker. Tentunya segala kebutuhan dan kenyamanan member idn poker online menjadi prioritas utama kami selama 24jam penuh. Banyak pula aneka ragam jenis judi online lainnya yang b
svg.jsとsvg.draggable.jsを使って、SVGタグ内のオブジェクトをドラッグ＆ドロップさせてみる - Qiita
svg.jsとsvg.draggable.jsを使って、SVGタグ内のオブジェクトをドラッグ＆ドロップさせてみるSVG この記事は「SVG Advent Calendar 2014」の7日目の記事です。前日の記事は_tanshioさんの「IEにも対応したレスポンシブSVGの作り方」でした。 以前、「HTML5のcanvas内の複数の画像をドラッグ＆ドロップさせてみる」で書いた内容と同じことをSVGで試してみたくなったのでまとめました。 SVGを操作するためのライブラリはRaphaëlやSnap.svgが有名ですが、今回はsvg.jsとそのプラグインであるsvg.draggable.jsを利用しました。 svg.jsは、minifyされたものだと11.8KB 程度と非常に軽量で、ドキュメントも見やすく、今回触ってみてとても扱いやすいライブラリだと感じました。 実際のコードはこんな感じで、オブ
[JavaScript] 動的SVGからpngを作りたいときはcanvgを使う。Image.src経由だとIEのSecurity Errorが出ちゃう « きんくまデザイン
こんにちは。きんくまです。 今回は、「動的SVGからpngを作りたいときはcanvgを使う。Image.src経由だとIEのSecurity Errorが出ちゃう」です。（長い） SVGを動的にJavaScriptでいろいろいじったものを画像化したかったのですが、最初にやってた方法だとIE11でエラーが出てしまいました。 2018年3月の現時点だと、SVGから直接png化するメソッドはなさそうです。 なので、SVGをcanvasに描画して、そこからtoDataURLでbase64化するという流れになります。 でハマった方を書く前に忙しい方のために、先にcanvgを使った方法を書いておきます。 canvgでsvgを画像化する >> GitHub – canvg/canvg: Javascript SVG parser and renderer on Canvas canvgはSVGをパースし
"インラインSVG"を使ってレーダーチャートを作ってみよう！ | Casley Deep Innovations株式会社 技術ブログ
”インラインSVG”を使ってレーダーチャートを作ってみよう！ 作成日：2014/04/23 更新日：2018/07/12 技術ブログ フロントエンド はじめまして！SI部の杉田と申します。 現在マークアップエンジニア目指して勉強中です。 今日はその中で勉強した、「インラインSVG」についてご紹介したいと思います！ 目次 ・概要 ・導入編(インラインSVGについて) ・土台編(レーダーチャートの土台を作る) ・項目表示編(レーダーチャートにチャートの項目を作る) ・チャート編(フォームで入力した値でチャートを作る) ・ソース ・さいごに 概要 そもそもSVGとはScalable Vector Graphicsの略で、ベクター形式の画像フォーマットのことです。 JPEGやPNGなどのビットマップ形式とは違い、SVG画像は画像が拡大縮小回転されて表示されても画質が落ちたりすることがありません。
GIGAZINE - Illustratorのようにベクター画像を扱うフリーソフト「Inkscape」
いわゆるSVG形式のベクター形式画像ファイルを扱う時に便利なオープンソースのソフトウェア。開いたSVGファイルを任意の解像度のPNGファイルに変換できます。また、Illustratorのようにベクター形式で画像を作成することも可能。Linux、Windows 2000/2003/XP、Mac OS X、FreeBSDなどで動作します。 実際のインストールと利用方法は以下の通り。 Inkscape. Draw Freely http://www.inkscape.org/ ダウンロードはこちらから。 http://www.inkscape.org/download.php ダウンロードした本体をクリックしてインストール開始 「Next」をクリック 「Next」をクリック 「Next」をクリック 「Install」をクリック しばらく待つ 「Next」をクリック 「Finish」をクリックすれ
SVG Developers Center:SVGファィルでJavaScript（jp）
SVGファィルでJavaScript（jp） □SVGファィルでJavaScript［JavaScript］All About Japan http://allabout.co.jp/computer/javascript/ Web向けに開発された画像データフォーマットSVGはXMLベースのテキストデータで、JavaScriptを使って操作が可能だ。 JavaScript書籍の執筆などをされている高橋登史朗氏がナビゲーターサイト「All About Japan」のJavaScriptページを担当。【SVGファィルでJavaScrip】では、SVGにインタラクティブなどの要素を追加するために不可欠なJavaScript関連情報をまとめ掲載しています。このページのリストは急速に増えそうな感じですね(＾＾;; Posted by takesato at 2003年12月01日 13:26
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue + SVG - sushitecture
http://pops-web.com/main/pops/archives/384
http://chibinowa.net/note/web/svg-badge.html
はてなブックマークのお気に入りユーザ数を視覚化 - Hatebu Domain Visualization