タグ別アーカイブ: svg

【IE】いんらいんSVG めんどくさい【爆発しろ】

IEにも対応したレスポンシブSVGの作り方 | たんしおどっとねっと

IEにも対応したレスポンシブSVGの作り方

レスポンシブSVGをインラインで配置するとき、IEとandroidが高さを計算しないのに対応する -『CSS』 – webmanab.html/ウェブまなぶ

レスポンシブSVGをインラインで配置するとき、IEとandroidが高さを計算しないのに対応する -『CSS』

SVG背景

SVGでセクションの区切りを斜め線にする | webOpixel
http://www.webopixel.net/html-css/1032.html

[DEMO] SVGでセクションの区切りを斜め線にする
http://www.webopixel.net/lab/sample/15/0924svg-full/section.html

バグ

コレのとおりにするとFirefoxでwidth100%にならないバグがあった。
dataURLのBase64エンコードをしてそれを読み込むようにした。

Base64エンコードをしてくれるサイト
Base64 Decode and Encode – Online
https://www.base64encode.org/

ちなみにsvg自体にwidthを入れれば良いという記事もあったけど、逆に全てのブラウザでうまく表示出来なくなったので却下。

        &:before,&:after {
            content: "";
            display: block;
            height: 60px;
            position: absolute;
            bottom: 0;
            z-index: 2;
            width: 50%;
            min-width: 720px;
            // background:url(../images/sep_top.svg) center top no-repeat;
            background-image:url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cGF0aCBkPSJNMCAxMDB2LTEwMGwxMDAgMTAweiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        &:before {
            left:50%;
            //回転させる
            transform:rotateY(180deg);
        }
        &:after {
            right:50%;
        }

その他

IE9-11で背景画像のSVGの表示が崩れる問題と対処法 – 週刊SVG
http://ssvvgg.net/post/140503977275/ie9-11%E3%81%A7%E8%83%8C%E6%99%AF%E7%94%BB%E5%83%8F%E3%81%AEsvg%E3%81%AE%E8%A1%A8%E7%A4%BA%E3%81%8C%E5%B4%A9%E3%82%8C%E3%82%8B%E5%95%8F%E9%A1%8C%E3%81%A8%E5%AF%BE%E5%87%A6%E6%B3%95

SVG書き出しメモ

イラレ
【書き出し】→【ファイル形式:SVG】→【アートボードごとに作成:すべてにチェック】→OKでいけました!

なんか「勝訴!」みたいな感じでデザイナーさんから連絡きたので何かのときのためにメモ。
やったね!

SVG全面背景

これで繰り返しを作った

背景を SVG で全面表示し、パターン化をアニメーションさせる

背景を SVG で全面表示し、パターン化をアニメーションさせる

全画面の指定の仕方

SVGで画面全体に斜め線や曲線を引く | webOpixel
http://www.webopixel.net/javascript/1024.html

クリップパスとマスクとパターン

svg要素の基本的な使い方まとめ
http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_10.htm

Macで SVGの不要なデータを削除して圧縮する SVGO GUIをインストールして使うまでをメモ

↓これの軽量化のところで書いてたやつ。

SVGをもっとさくさくっと動かし鯛

実際につかってみて
svgの圧縮するのにsvgomgを使おうかと思ったらpunnyPNGみたいにアップロードするのがめんどかったので、SVGOをつっこんだ。

なんか記事はパラパラあるものの、流れがよーわからんかったのでメモ。

SVGOをDL

SVGOはnodejsで動くのでnode入ってる前提。
How to useを見たらかいてあるように黒い画面(ターミナル)でインストールしたら使える。

インストール

$ [sudo] npm install -g svgo

GitHub – svg/svgo: Nodejs-based tool for optimizing SVG vector graphics files.
https://github.com/svg/svgo

使い方

How to useを見たらかいてあるように黒い画面(ターミナル)でコマンドをたたく
with folderの記述で使ってたけど、フォルダわけ細かったからめんどい。

SVGO GUIをつかってドラッグアンドドロップでやり鯛

黒い画面でいちいちパス貼り付けるのめんどくさいよう。
使いやすいUIをくれUIを。てなわけでSVGO GUIをDL。ホントはAutomatorとかでショートカット作ってもいいけどもう随分やってないからDLしたほうが早そうだった。。

GitHub – svg/svgo-gui: Node-WebKit based GUI for SVGO
https://github.com/svg/svgo-gui

下の方にDLリンクが有る。
「ふええDLしても開けないよう///」って場合は解凍ソフトをDLしてそれで開く

The Unarchiver on the Mac App Store
https://itunes.apple.com/us/app/the-unarchiver/id425424353?mt=12

ドラッグアンドドロップで使える→めでたしめでたし。

多いもので30%,少ないものだと5%の圧縮。そんなものか。もともとがそんなに大きいサイズじゃなかったけど、まぁ、容量減るならいいか。

SVGでパーツを書き出す時の注意点

最近はフォトショからアセット書き出しで
svgファイル書き出すことが増えましたがその際の注意点について。

余白を付けたいときはその分の四角いオブジェクトを置く

グループにマスク、ではだめ

PNGやJPEGならいけるけど、SVGは余白つかない。
これはPhotoshop内の仕様らしい

###余白用オブジェクトのぬり・線はなしで。
線に太さがあるとその分だけ領域が広がってしまうので注意
「ダミーデータなのでオブジェクトの領域を罫線で表現」とかしてると領域が太って
htmlに埋め込んだ時に、サイズがおかしい〜ってえらいことになる(カモ)

塗り:フィル, ストローク, マーカシンボル – SVG 1.1 (第2版)
http://www.hcn.zaq.ne.jp/___/SVG11-2nd/painting.html

パスデータ以外をふくませない

パスデータだから拡大しても綺麗→パスデータ以外をふくませない。

単純に画像を配置してsvg書き出しするとimgとしてデータエンコード?されたタグが入るのでNO!

以上、メモメモ。

Snap.svgテストしたときのメモ

Snap.svg – Getting Started
http://snapsvg.io/start/

サークルを作る

var s = Snap("#svg");
var gloup1;

//Lets create big circle in the middle:
var bigCircle = s.circle('50%','50%', 10).attr({fill:"#ca374c"});
var bigCircle2 = s.circle('50%','50%', 10).attr({fill:"#7c4e94"});
var bigCircle3 = s.circle('50%','50%', 10).attr({fill:"#328eb0"});
var bigCircle4 = s.circle('50%','50%', 10).attr({fill:"#28947b"});

テキストを入れる

var text = s.text(150,'50%',"テキストを入れる").attr({fill:"transparent", fontSize:"40px"});

グループの作り方

gloup1 = s.g();
gloup1.add(bigCircle, bigCircle2, bigCircle3, bigCircle4);
//zindexのいじりかた prependのテスト
var test = s.circle('50%','50%', 100).attr({fill:"#fff"});
$(test.node).attr('id','test');
$(gloup1.node).attr('id','gloup1');
test.prependTo(s);

//s.select('#test').before(s.select('#gloup1'));
//s.select("circle").before(s.select("g"));
test.before(gloup1);

グループの消し方

gloup1.remove();

svg memoクリッピングとマスキング

クリッピングとマスキング – SVG | MDN
https://developer.mozilla.org/ja/docs/Web/SVG/Tutorial/Clipping_and_masking

クリッピング, マスキング, 合成 – SVG 1.1 (第2版)
http://www.hcn.zaq.ne.jp/___/SVG11-2nd/masking.html#AutoClipAtViewportNotViewBox

svg要素の基本的な使い方まとめ
http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_10.htm

【SVG】クリッピングパス | 集の一期一会
http://tsudoi.org/weblog/?p=4045

・クリッピングパスは抜きと塗りを反転できない
・マスクは反転できる
・マスクはグループが作れる
・マスクはグラデーションかければ半透過や徐々にフェードなどが出来る

SVGをもっとさくさくっと動かし鯛

各種ライブラリについて

アニメーション・svg描画準備系

animation – 最近のJS&CSSアニメーションライブラリまとめ – Qiita
http://qiita.com/tejitak/items/de7fbed9bf22b9037526#createjs

snap.svgとついーんめっこす(GSAP)で動かすてみますた。
svgのアニメーション系どれがいいのって話。(半世紀前に終わってそうですねすみません)
普通に動かすとカクカク重かったとです。
下記が実際に描いてみたコード

    //prepare for SVG animation
    function showSVG(){
        // t.svg1.flower.attr({ transform: 's0,0' });
        t.svg1.flower.attr({ 'path' : t.svg1.maxSize });
        $('#svgArea').css({'visibility':'visible'});
        //座標変更
        // t.svg1.flower.animate({ transform: 't100,100' }, 800, mina.bounce);
        //スケール(重い)
        // t.svg1.flower.animate({ transform: 's0,0' }, 800, mina.easeinout);
        // t.svg1.flower.animate({ transform: 's0,0' }, 800);
        //変形(重い→0からへんかさせるよりは軽くなった)
        // t.svg1.flower.animate({ path: t.svg1.minSize }, 600, mina.easeinout);
        TweenLite.to("#aaa", 1, {scale:0,transformOrigin:"50% 50%"});
        // TweenLite.to("#aaa", .6, {scale:0,transformOrigin:"50% 50%",ease: Power0.easeOut});
        // t.svg1.flower.animate({ 'r' : t.svg1.maxSize }, t.loading.speed/2, t.loading.easing);
        // t.svg1.flower.animate({ 'r' : t.svg1.maxSize }, t.loading.speed, t.loading.easing);
        // $('#loadingImg').removeClass().addClass('chara'+(1+parseInt(Math.random()*4)));
        // $('#loadingInner').addClass('shown').show();
    }

・描画の快適さ
スケール動かす<pathを動かす
snap.svg<TweenMax<TweenLite

ただし

ついーんめっこすで動かすときはtransform-originに気をつける
SVG Animation and CSS Transforms: A Complicated Love Story | CSS-Tricks

SVG Animation and CSS Transforms: A Complicated Love Story

TweenMax.to("#svg, #div", 2, {
  rotation:360, 
  transformOrigin:"50% 50%"
});

あと、GSAPではdashtray?点線のやつやfillの変更などの高度なSVG用プロパティは専用プラグイン(有料)がないといじれないらしい。
商用プランは年150$もします。。。。便利だけどね。超便利。

軽量化・圧縮

圧縮用。不要な記述やID、改行を削除するやつ〜〜
SVGOMG – SVGO’s Missing GUI
https://jakearchibald.github.io/svgomg/

ブラウザから SVGO で SVG ファイルを最適化できる 「SVGOMG」 | WWW WATCH
https://hyper-text.org/archives/2015/02/svgomg.shtml

見た目のクオリティはそのままで、SVGファイルを大幅に軽量化する便利ツール -SVGO GUI | コリス

見た目のクオリティはそのままで、SVGファイルを大幅に軽量化する便利ツール -SVGO GUI

ライブラリでのアニメーション

JavaScriptライブラリTweenMaxでSVGアニメーションを扱う方法 | 株式会社LIG
http://liginc.co.jp/web/js/other-js/168856

最近の文献よくわかんねぇよ!
Snap.svgはs0,0っていう指定がよくわからなくて途中泣きそうになったよ
Snap.svg Tutorial
http://svg.dabbles.info/snaptut-transform

svgの注意点

htmlの他の要素と違ってz-indexの概念がない。
描画順(or記述順)が重なり順。
変更するには
・DOMをいじっておく
・JSで記述位置を変更する(jqueryやsnap.svgのappend,prependで位置を変更する)
などの対応が必要

描画始点のポイント

描画の始点をどこにするかも重要。
例えば

<circle class="rectangles" cx="50%" cy="50%" r="24" stroke="red" />

とすれば中央が始点となるので、下記の場合は数値より便利。

  • xyを中央から画面外にフェイドアウトさせる
  • もしくは画面外から中央に集める
  • はたまたブラウザ中央からの位置で配置する

どのみち使い方による。