SVGをjQueryで操作する際にハマったので、書き留めておく。 | 5 LOG
SVGファイルををobjectタグで読み込んで、jQueryで操作しようとしたら、取得出来なくてハマった。 まずは、SVGデータをIllustratorで用意。 その際に、レイヤーグループに名前を付けておくと、<g id=”レイヤーグループ名”>で囲んでくれるので便利。 SVGファイルをobjectで読み込む。 <object id="svg_map" data="map.svg" type="image/svg+xml"></object> インラインSVGの場合、 var $svg_map = $('#svg_map'); で取得可能だが、 objectで読み込んだ場合は、取得出来ない。 iframeと同じようにしてもダメ。 var $svg_map = $('#svg_map').contents(); // ダメ なので、jQueryは使わずに、 var svg_map = doc
Snap.svg Tutorial
Drawing path, translating and testing points inside Lets get an SVG path displayed and another translated, then we can add it to our canvas. We can hit test by amending our point to match the translation var s = Snap("#svgout"), c, x, y, myTranslateX = 200, myTranslateY = 100; var myPathString = "M 60 0 L 120 0 L 180 60 L 180 120 L 120 180 L 60 180 L 0 120 L 0 60 Z"; var p = s.path( myPathString )
10分でわかるSVG 基礎編
知って得する、Webブラウザ上で利用できるグラフィック関連技術。HTMLのような感覚で図形が描画できる「SVG」をハックしよう SVGドキュメントの書き方 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。第2回となる今回のテーマはSVGです。 ご存じの方も多いと思いますが、SVGはXMLをベースにしたベクトルグラフィックスの記述言語です。PNGのような画像フォーマットの1つでもありますが、実際にはXMLを記述したテキストファイルであり、HTMLと同様にJavaScript（DOM API）による制御も行えます。HTMLがタグによって文書の構造を記述するのと同様に、SVGはタグで図形を記述します。 ■ XMLでベクトルグラフィックスを記述するSVG 実はSVGの規格自体はかなり以前から存在したのですが、長らくInternet Explorer（以降IE）
Animate SVG with CSS
Animating SVG with CSS is like animating any other element with CSS—it can be done with transitions, transforms, and keyframe animations. Once you’re familiar with the markup of an SVG, the rest is fairly straight forward. I recently played around with animating SVG with CSS, and wanted to share what I did along with my findings and techniques. We’ll start by taking a drawing, exporting it as an S
基礎から学ぶ、IllustratorでSVGを最適化して書き出す方法
SVGをWeb制作で使うために、ブラウザーに最適化されたSVGファイルの作成、書き出し、最適化の方法をマスターしましょう。 SVGの勉強を始める前に理解したいことがあります。SVGファイルの最適化は、作成から書き出しまで続く工程です。WebページのHTMLと同様、不出来なSVGファイルを完成後に修正するのは大変です。 書き出してから使える最適化ツールもありますが、想定外のことが起こってファイルが壊れる場合があります。SVGを最適化する確かな知識を身につけ、SVGを活用しましょう。 IllustratorでSVGを作成 SVGをIllustratorで作成するには、最終的な出力がWeb用にうまく最適化されるよう考慮して、以下の工程を進めます。 適切なカラースペースを設定 大半のベクター画像用ソフトウェアと同様、Illustratorは印刷物向けに設計されているため、カラースペースはデフォルト
SVGと物理エンジンをマッピングするn個の方法 - Qiita
最近SVGにハマっている。ふとした思いつきで、SVGのcircle要素と物理エンジンをマッピングできたら、簡単にパーティクルが作れるのでは、と思ったのでやってみる。 PhysicsJS + Snap.svg(雑な描画マッピング) PhysicsJS + Snap.svg + 自力の差分管理 PhysicsJS + React 作るのは非常に雑な、こういうやつだ クリックしたらcircle要素が出現する 物理エンジンによって座標計算されて右方向に飛んで行く 50px 右に移動したら消える 物理エンジン的に面白い挙動とかはあとで考えることにする。 物理エンジンの世界を作る 今回はPhysicsJSを使うことにした。box2dはC++由来のAPIが古臭いし使いたくない。matter.js と PhysicsJSがメンテされててモダンな雰囲気がして試してみたのだけど、matter.jsは何かとおせ
Free Vector Art - Download Free Vector Art Graphics at Vecteezy!
notifications-menu#getMarketingNotifications:once click->ez-drop-down#handleSubMenuClick click->notifications-menu#menuClick" data-notifications-menu-target="menuButton">
SVGをcss/jsで操作するときに知っておきたいこと - Qiita
はじめに ※SVG初心者向きの記事です SVGはスケーラブルでベクターなグラフィックスです。レスポンシブや高解像度ディスプレイに対応する時にはとても頼もしい存在です。htmlと同じようにcssやjsでの制御も可能なため、インタラクティブなコンテンツもお手の物です。 そんなSVGは表示だけであれば簡単ですが、cssやjsを利用する際には知っておきたい基本知識があります。 これ以上、私のように時間を浪費してしまう哀れな子鳥たちを増やさぬようメモしたいと思います。ｱｰﾒﾝ 目次 表示のさせかたに気をつけろ！ cssに気をつけろ！ fill: none;に気をつけろ！ viewBoxに気をつけろ！ jQueryに気をつけろ！ サーバーの設定に気をつけろ！ 表示のさせかたに気をつけろ！ SVGの表示方法は複数あります。 <img>のsrcでファイルを読み込む background-imageプロパテ
Data URIでSVGを指定する | jekylog
imgのsrcにdataURIでSVGを指定する際の手順をメモ。 1. IllustratorでSVGを書き出す。 [別名で保存]、若しくは[WEBおよびデバイス用に保存]でSVGを書き出す。ロゴくらいならデフォルトの書き出しでいいかも。パスの数が膨大でファイルサイズの削減が必須な場合はカヤックさんの下記記事のようにオプションをゴニョゴニョするみたい。 SVG女子を90%軽くしたSVG軽量化テク+α #svggirl | KAYAC DESIGNER'S BLOG - デザインやマークアップの話 2. SVGファイルを編集 100px×95pxの星を書き出したSVGファイルをテキストエディタで開くと下記みたいなXMLで構成されている。 <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 13.0.
Photoshopなしでできる！SVGフィルターを使ったバナーデザインのテクニック
SVGフィルターを活用すると、Photoshopで加工しなくてもWebサイトのトップページで使えるバナー画像が作れます。覚えておくと便利なテクニックです。 先日、WordPressのeコマーステーマをリリースしたところ、バナー画像に使っている「ぼかしで覆うエフェクト」に関する質問がたくさん寄せられました。ぼかしで覆うエフェクトはどんな画像にでも動的に適用できる注目のエフェクトで、優れた画像処理方法だと考えています。さらに重要なことは、汎用的なテクニックなのでデザイナーにとって使い勝手がいいということです。この記事では私が学んだことを手短に紹介しましょう。 上のバナーの「ぼかしで覆うエフェクト」について簡単に説明します。 単一の画像として使用 非破壊的（non-destructive）である（オリジナルのJPEG・PNG画像に直接変更を加えていない） 画像にテキストを追加でき、テキストによっ
Hero Patterns | Free repeatable SVG background patterns for your web projects
Hello! I’m Steve Schoger, a UI designer and illustrator from Kitchener, Ontario. I draw and maintain Hero Patterns. Hero Patterns will always be updating and will always be free. Follow me on Twitter and Dribbble to find out when new updates are available. Also, check out Zondicons: A set of free premium SVG icons for you to use on your digital products.
LazyLine: Best VPN Services
VPN What is VPN and why do you need it?VPN, or Virtual Private Network, is a technology that allows you to create a secure and private connection to the internet. With VPN, you can protect your online activities from prying eyes and access the internet with greater freedom and privacy. Learn more about VPN and why it’s essential in today’s digital world. Get Secure Now: The Honest VPN Rating Site
もはや芸術！SVGアニメーションの巧みな活用方法20選
更新日: 2017年3月1日公開日: 2015年10月9日もはや芸術！SVGアニメーションの巧みな活用方法20選 なんだか最近ハイセンスなwebサイトで見かけることが増えてきた「SVGアニメーション」。動画やGIF、CSSでは表現できないような“動き”を軽やかに演出しています。そこで今回はSVGアニメーションを使っているサイトや参考になるソースをピックアップしてご紹介していきたいと思います。 イベント要素をプラスした「BoonconPIXELS」 BoonconPIXELS グラフィック・デザイナー集団の booncon PIXELS。ページトップのアニメーションがキュートですが、さすがと思わされるところに、SVG アニメーションの中にイベント要素を盛り込んでいます。左上の文字と左方の PC 画面らしき画像をクリック or タップすると文字やカラーが変わります。なかなか遊び心があって、参考
いまさら聞けないSVG——Web制作に便利な3つの理由 (1/2)
スマートフォン向けのWebサイトやWebアプリを中心に、「SVG」がいま再注目されています。単なる画像フォーマットを超えて、最近ではさまざまな表現に広く活用されるようになりました。 本連載では、SVGの概要から基本的な使い方、Web制作での活用方法までをじっくり解説。CSSによる装飾やJavaScriptとの連携など、すでに使っている人がもっと使いこなすためのテクニックも紹介します。（編集部） Webの表現を広げるSVGの魅力 SVGと聞くと、「単なるベクターの画像でしょ」と思う方も多いでしょう。確かにSVGは「Scalable Vector Graphics」の略なので、ベクター形式の画像フォーマットであることには間違いありません。 一方で、SVGには、PNGやJPEGといった、他の画像フォーマットとは異なる魅力があります。SVGをWebページに使うことで、これまでのHTMLやCSSだけ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Snap.svg Tutorial
http://creativedroplets.com/export-svg-for-the-web-with-illustrator-cc/
これは簡単でいいね！コンテンツの区切りを斜め線にするテクニック（レスポンシブ対応） -Angled Edges