D3.js ミドルウェア

Inkscapeでsvgのグラデーションとフィルターを作成してみた

投稿日:

 

 

Inkscapeといえば無料で使えるきれいな線がかけるソフトという認識

SVGを勉強しているとそのフィルタエディタがとても便利だった

参考にしたページ www.atmarkit.co.jp/fwcr/design/benkyo/webgraphics03/04.html

グラデーションのつくり方

英語だけど何言っているかわからなくても見てればだいたいわかる

2013-01-11_17h16_16

まず短形ツールをつかって適当に四角形をつくる

2013-01-11_17h16_31

つくったら選択ツールを選べば確定

2013-01-11_17h16_51

つぎにグラデーションツールを選んで

2013-01-11_17h17_09

動画を参考にグラデーション作成

2013-01-11_17h17_57

うえのように補助線を水平・垂直にするにはctrlを押しながらドラッグすればOK

 

フィルターのつくり方

以前につくったフィルタをInkscapeでつくってみる

d3.jsでrectに角丸・半透明・グラデーション・ドロップシャドウ・ライティング効果を追加~主にsvgのこと

もとのチュートリアル www.w3schools.com/svg/svg_feoffset.asp

「フィルタ」から「フィルタエディタ」を選ぶ

2013-01-11_17h19_57

フィルタエディタはこんな感じ 最初に開いた状態だと狭すぎるので境界線を縦にドラッグして広げておいた方がよい

2013-01-11_17h20_22

エフェクトは

www.hcn.zaq.ne.jp/___/SVG11-2nd/filters.html

 

2013-01-11_17h20_56

フィルタの新規作成からエフェクトを追加

2013-01-11_17h22_01

チュートリアルのとおりにフィルタを作成

とても簡単

ソースの選び方は左の三角を右の縦書のところにドラッグすればOK

2013-01-11_17h25_26

第1ステップができた

2013-01-11_17h25_16

 

ガウスぼかしBlurを追加 ブレンドのソースを変更して、オフセットのソースもアルファに変更

2013-01-11_17h28_43

ドロップシャドウできた

2013-01-11_17h28_56

実はInkscapeのフィルターもフィルタエディタでできたフィルタの組合せでできてる

2013-01-11_17h31_18

 

 

2013-01-11_17h31_11

 

できたsvgのdefsはこんな感じ

 

Inkscapeのフィルター一覧 d.hatena.ne.jp/feb-hare/20101110/1289353207

 

htmlにおいてD3.jsから使ってみようと思ったけど、そのままコピペでは使えなかった

それでも実際に効果を見ながらフィルタを作成できるのでやっぱり便利

d3.jsで使うにはコード上でパラメータを使うとか

 

*そのうち読む

Scripting Inkscape with d3.js

 

-D3.js, ミドルウェア
-

執筆者:

関連記事

Railsで顧客と商機を管理〜FatFreeCRM

目次1 CRMとは2 FatFreeCRMの前提条件3 FatFreeCRMのインストール4 できた CRMとは CRMとは、Client Relationship Managementの略で、顧客の …

no image

d3.jsでグラフ描画するときの枠組み作成のメモ

前の記事 svgでビジュアライゼーションことはじめ~d3.js svgで棒グラフを作成する~d3.js Rubyでd3.jsのapiリファレンスの一覧を取得してくる~mechanize Tree図をい …

開発者向けリアルタイムチャットアプリケーション「AsakusaSatellite」を試してみた

By: NASA Goddard Space Flight Center – CC BY 2.0 目次1 公式2 前提3 git clone4 bundle5 sockyサーバー6 rai …

no image

D3.jsのBarChartをCoffeeScriptでクラス化(仮)

    グラフを描くにはデータセットの数字だけじゃなくて、描画領域の大きさとか幅マージンの値とかいろんな設定が必要なわけで、ただ、データセットの数字とマージンの数字はにんげんにとっ …

Tree図をいろいろ試してみる~d3.js

  前提 Rubyでd3.jsのapiリファレンスの一覧を取得してくる~mechanize これで取得してきたJSONを使っていろいろ試してみた と言っても、まだ指定のJSONを置き換えただ …