SVG | ウダ2Blog

SVGのリンク機能で集中線を描く

uda2 — Mon, 22 Jul 2019 14:46:50 +0000

旭日旗の光線のような線（集中線？）を背景にしたいときにはイラストレーターで回転複製して作ってsvgなどに書き出してました。
無駄なタグを掃除する為にSVGファイルをエディタで開くとコピーした多角形羅列されていて無駄が多い事に気づき手書きしてみました。

おおまかな流れは下記のような感じです。・背景に円形のグラデーションを描画・defsにリンク元（シンボルとかエイリアス的な機能）の三角形を作成・useタグでそれを角度を変えて描画簡単に思えたのですが一カ所引っかかり描画されませんでした。問題は一行目のsvgタグに「xmlns:xlink=”http://www.w3.org/1999/xlink”」が抜けてたのが原因でした。リンク機能を使う場合はこの記述が必要らしいです。

これをベースに集中線を生成するツールをさくせいしました。乱数を設定することでコミックの集中線ぽいものも作れるようにしています。
https://tools.uda2.com/central-line.html

The post SVGのリンク機能で集中線を描く first appeared on ウダ2Blog.

SVGでボタンの枠線アニメーション

uda2 — Wed, 31 Oct 2018 12:47:36 +0000

一般的にボタンの枠線のアニメーションはCSSのborderを使う。
CSSだけで完結するので見やすく便利だが、角丸で2点から囲うようなアニメーションを作ろうと思ったらCSSでは難しそうなのでSVGでやってみた。

サンプル

なんで線を描くだけでSVGを使うかというと破線の間隔（stroke-dasharray）や開始位置（stroke-dashoffset）といった設定が可能な為だ。
SVGを背景にするとアニメーションの設定が出来ないのでインラインSVGにしたが、都度HTMLに挟み込むのは面倒なのでjavascriptで配置する事にした。
ここで難所が現れた何故か埋め込んでも現れないのだ、開発ツール上ではあるのに現れず、CSSも適応されていない。
javascriptで通常何か要素を作る時は「createElement」を使うが、svgのような名前空間を持つ要素を作成する場合は「createElementNS」を使うらしい。

var navs = document.body.querySelectorAll('a.anirect');
navs.forEach(function(nav) {
  var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  rect.setAttribute("x", "0.5");
  rect.setAttribute("y", "0.5");
  rect.setAttribute("rx", "3");
  rect.setAttribute("ry", "3");
  rect.setAttribute("width", nav.clientWidth - 1);
  rect.setAttribute("height", nav.clientHeight - 1);
  var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  svg.setAttribute("viewBox", "0 0 "+nav.clientWidth+" "+nav.clientHeight);
  svg.appendChild(rect);
  nav.appendChild(svg);
});

次にCSSですが98というのは要素の高さと幅の合計です。

a.anirect {
	color:#FFF;
	text-decoration: none;
	padding: 5px;
	font-size: 12px;
	display: block;
	position: relative;
}
a.anirect svg {
	position: absolute;
	top: 0;left: 0;
	display:block;
	pointer-events: none;
}
a.anirect svg rect {
	fill:none;
	stroke:#FFF;
	stroke-dasharray: 0 98;
	stroke-dashoffset: -40;
	stroke-width: 1;
	transition: stroke-dasharray 500ms 0s ease;
}
a.anirect:hover svg rect {
	stroke-dasharray: 98 0;
}

The post SVGでボタンの枠線アニメーション first appeared on ウダ2Blog.

ワールドカップ記念10連マトリョーシカ

uda2 — Tue, 19 Jun 2018 06:06:02 +0000

ワールドカップ2018はロシアです。なので10連マトリョーシカ作りました。

マトリョーシカ

元にした絵はFree マトリョーシカ人形 Stock Photo – FreeImages.comなんですがトレースまでしたのにいじりすぎて原型は無くなってます。
おなかの所は元はエプロンに花柄なのですが、エプロンは微妙なので止めました。エプロンを止めるとシンプルな花柄ではもたなくなったのでユリアン（ウチのフレブル）を抱かしておきました。
拡縮するので画像はSVGにしてます。

絵はともかくやりったかったのはマトリョーシカをスポポポーンと連続で開く動きを作りたかったので、カーソルの上下移動に合わせて次々に開閉し、カーソルの左右で回転するようにしました。
一応スマホでもできるように傾きを検知させましたが、ブラウザが回転してしまうので微妙です。
すぽんという効果音はDOVA-SYNDROMEさんのものをトリミングして使っています。
ただマトリョーシカの実物を見たことが無いので本当にこんな音がするかは不明です。

特に何かの役に立つわけではないけど気持ちいいです。

The post ワールドカップ記念10連マトリョーシカ first appeared on ウダ2Blog.

SVGアニメーション

uda2 — Tue, 25 Nov 2014 16:56:36 +0000

なんだかんだでcanvasに押され気味のSVGだがAnimated SVG Iconsなんかを見ているとSVGにも可能性を感じる。

という事で昨年やった静止画のSVGに続きSVGアニメーションもやってみた。
上記の「Animated SVG Icons」はSnap.svgというAdobe製のライブラリを使っていたがちょっと動かすだけなので直接svgを書いてます。
目は“神衣純潔”なイメージです。
目は数値入力をして作りましたが、眉毛はイラレで作ってエディタで開いてコピペしてます。こういった作り方ができるのはSVGのいいところでもあります。
上から眉毛、目の輪郭のアニメーション、目玉のアニメーション、目玉のマスクのアニメーションとなっています。
問題はモダンなブラウザしか動かない事です。IE11だと眉毛だけになってしまいます。

参照
Animation SVG Tiny 1.2
svg要素の基本的な使い方まとめ
 「10分でわかるSVG 応用編」サンプル

The post SVGアニメーション first appeared on ウダ2Blog.

Retina時代のスマホサイトのタイトルロゴはSVG

uda2 — Mon, 20 Aug 2012 09:25:56 +0000

「Retina時代のスマホサイトのタイトルロゴはSVGがいい」と何処かに書いていたので作ってみた。
元画像はマイリリースのスマホ版トップのロゴ画像で元は480×109で作成して、iPhoneだと縦(320px)にも横(480px)にも使える様にしてる。

元々FireWorksで作成していたのでJPEG・PNGはRetinaテスト用に倍の解像度に変更しするだけで済んだが、SVGはFireWorksが未対応だったのでイラレに書き出し作り直した上でエディタでフィルタを追加したりと微調整した。

よくやる2倍サイズのJPEG画像（23.70KB）
モヤモヤが出るので今回の様なロゴ画像には向かないJPEGだけどRetinaだとそんなに問題無さそう、グラデの掛かった画像の圧縮率は魅力的

よくやる2倍サイズのPNG画像（39.88KB）
RetinaだとJPEGと画質は分らないし容量も大きい、グラデーションが無ければ色数を落として圧縮率を上げる事も出来るかも

SVG画像（8.85KB）
予想以上に低容量、SVGは表示が重いらしいがこのサイズだと差は分らない。

safariだとfilterが上手く動かないのかドロップシャドーが効かないみたいで昔のイラレみたいに手作業で追加する必要があり、容量も若干増える事になってしまう。

The post Retina時代のスマホサイトのタイトルロゴはSVG first appeared on ウダ2Blog.