Rough.js
Create graphics with a hand-drawn, sketchy, appearance Rough.js is a small (<9kB gzipped) graphics library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths. Rough.js works with both Canvas and SVG. Install Install from npm: npm install --save roughjs And use it in
面倒なSVGのパスを簡単に作成できてしまう便利ツール -SVG Path Builder
面倒で複雑なSVGのパスでも簡単に作成できてしまう便利ツールを紹介します。 オンラインでもローカルでもどちらでも利用できます。
Free vectors icons
No notifications to show yet You’ll see useful information here soon. Stay tuned!
We Love SVG - Google Fonts for icons | Icons8
<script type="text/javascript" src="//web.archive.org/web/20151204075254/https://cdn.rawgit.com/icons8/bower-webicon/v0.10.7/jquery-webicon.min.js"></script> Flat ColorWin10Font AwesomeFoundationMaterialGlyphiconsIcomoonIonWebhostinghubEntypoElusiveWPFMfglabsRaphaelSimple LineWeatherLsfLineconsMeteoconsMetrizeOcticonsIconicMakiOpenwebiconsStroke7TypiconsZocialBrandicoFontelicoStateface <!DOCTYPE h
多目的に使えるシンプルなデザインがいい！約800種類のアイテムが揃ったSVGのアイコン素材 -Glyph
シンプルで種類が揃っているアイコンは、見つけるのが大変。 Webサイトやアプリなど、ビジネスからポートフォリオや個人ブログまで多目的に使えるさまざまなアイテムが揃ったシンプルなデザインのSVGのアイコン素材を紹介します。 タイトルは800種類だとキリがいいのですが、799種類なので約800種類で。 Glyph Glyph -GitHub SVGアイコンをWebページに配置する方法 Glyphアイコン799種類とダウンロード方法 SVGアイコンをWebページに配置する方法 SVGアイコンをimgタグで配置 SVGアイコンを普通の画像のようにimgタグを使って配置します。 <img src="svg/si-glyph-bicycle-man.svg"> SVGアイコンをインラインで配置 SVGアイコンをエディタで開き、コードをコピペして配置します。右向きのアローだとこんな感じに。 <svg v
Pattern fills - samples.
There are many ways to fill the background of a DOM or SVG element, including using solid colors or gradients. If you want to use a repeating pattern of some kind, the easiest way to do so is to create an SVG document that defines it and use it as a pattern fill. SVG images are typically smaller than bitmap images and remain sharp on high-dpi screens. Unlike CSS3 gradients, SVG images are supporte
Draw Freely | Inkscape
初めての方へ パワフルでフリーなデザインツール イラストレーター、デザイナー、ウェブデザイナーなど、ベクターイメージを必要としている皆様に、Inkscape をオススメします。 柔軟性のあるドローツール さまざまなファイル形式との互換性 強力なテキストツール ベジエおよびスピロ曲線 Inkscape についてもっと知りたいですか? 機能の一覧をご覧になるか、今すぐ使ってみてください! Contributors 私たちのコミュニティに参加しませんか 私たちはいつも多くの方々からの支援に助けられています。あなたがコードを書けるなら、私たちの開発を助けてくださいませんか。コードを書く以外にもできることはたくさんあります: 機能のリクエスト バグの報告 ドキュメントの改善 より詳しい情報は 開発者向け セクションをご覧ください。
サンプルコードで学ぶ SVGの読み方、書き方 (2/2)
SVGの基本図形要素を知ろう ここまではツールで作成したSVGファイルをコピー＆ペーストして埋め込む方法を解説しました。一方、SVGはマークアップ言語ですので、もちろん手でコードを書くこともできます。基本的な図形の書き方を見てみましょう。 もっとも単純な図形は円です。円はcircle要素で描きます。円は、 中心点のx,y座標 半径の長さ があれば、どこにどんな大きさの円を配置するかを決められます。例えば、以下のコードで円を配置できます。 <html> ... <body> <svg width="600" height="400" viewBox="0 0 600 400"> <circle cx="100" cy="100" r="50"></circle> </svg> </body> </html>
ベクターデータで軽量だと噂のアイコンフォントを導入してみた
2013/02/02 この記事は書かれてから1年以上が経過しており、最新の情報とは異なる可能性があります techoldIESVGWebFontIcon-FontFont 表示スピードを速くするために、ベクターデータであるSVGを用いるのは、最近よく見られる手法だと思います。 ただ、特に古いIEなどでは、SVGはサポートが十分ではない側面があると思います。 そのデメリットを解消する方法の1つとして、アイコンフォントという手法が挙げられます。 気になっていたので、このブログに導入しつつどんな感じか検証してみました。 アイコンフォントとはヘッダーのアイコンがそれになってます。 拡大しても綺麗に表示されていますね！ こちらは、『Fontello – icon fonts generator』というのを利用させていただいて、 必要なアイコンのみを選択し、それをダウンロードして埋め込む形で導入してい
Textures.js
SVG patterns for Data Visualization Textures are useful for the selective perception of different categories View on Github Getting started -- from the top of d3.js -- var svg = d3.select("#example") .append("svg"); var t = textures.lines() .thicker(); svg.call(t); svg.append("circle") .attr("r", radius) .style("fill", t.url()); Lines
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_02.htm