Online Image Vectorizer
Image Vectorizer Convert raster images like PNGs, BMPs and JPEGs to scalable vector graphics (SVG, EPS, DXF) How does it work Vectorization of raster images is done by converting pixel color information into simple geometric objects. The most common variant is looking over edge detection areas of the same or similar brightness or color, which are then expressed as a graphic primitives like lines,
複数のアイコンプロジェクトから、使用するアイコンだけをアイコンフォントやSVGのセットにできる無料ツール
これまた、便利なツールが登場しました！ 使用するアイコンだけをアイコンフォントやSVGアイコンのセットにできる無料オンラインツールを紹介します。 さまざまなアイコンプロジェクトがサポートされており、BootstrapやMaterial Designをはじめ、当ブログでも紹介したことのある数多くのアイコンから使用するアイコンだけを選択できます。 例えば、Bootstrapからホームとアローだけをセットにするとか、BootstrapのホームとMaterial Designのアローをセットにするとかも簡単です。 Icônes Icônes -GitHub Icônesの特徴 Icônesの使い方 Icônesの特徴 Icônesは複数の商用利用無料のアイコンから、使用するアイコンを選んでセットにして利用できるオンラインツールです。 登録など面倒なことは一切なく、ブラウザから簡単に利用できます。
テキストやSVGや画像が3Dで動く！HTMLで実装した要素から3Dアニメを自動生成するスクリプト -ztext.js
普通のHTMLで実装されたテキストやSVGや画像を立体的にするためにレイヤーを自動生成し、3DのアニメーションにするJavaScriptを紹介します。 日本語や絵文字にも対応しており、アニメーションはマウス操作などに反応させることもできます。 ztext.js ztext.js -GitHub ztext.jsの特徴 ztext.jsのデモ ztext.jsの使い方 ztext.jsの特徴 ztext.jsはHTML要素からレイヤーを自動生成することで、テキストやSVGや画像を3Dにできます。CanvasやWebGLは一切必要はありません。 MITライセンスで、商用プロジェクトでも無料で利用できます。
商用無料！UIデザインに最適なSVGアイコンが1,130個、小さいスペースにも配置できる極小サイズ対応の優れもの
個人でも商用プロジェクトでも無料で利用できる、小さいスペースにも配置できる極小サイズ対応のSVGアイコンを紹介します。SVGアイコンなので、もちろん通常のサイズ、大きいサイズでも美しく表示されます。 UIデザイン用のアイコンはアウトライン・ソリッドの2種類計1,130アイテムが揃っています。しかもオープンソースなのは、嬉しいですね。 Teenyicons Teenyicons -GitHub Teenyiconsの特徴 Teenyiconsのダウンロード Teenyiconsの使い方 Teenyiconsの特徴 Teenyiconsは非常に小さいスペースにも配置できるようデザインされたSVGアイコンで、極小サイズ（15x15）でも鮮明に見えるよう設計されています。 MITライセンスで、商用プロジェクトでも無料で利用できます。
SVG Artista - SVG Drawing Animation Generator
<svg viewBox="0 0 564 242" version="1.1" xmlns="http://www.w3.org/2000/svg" width="564" height="242"> <g stroke-width="2" stroke="none" fill="none" fill-rule="evenodd"> <path d="M284.896413 1.77679122c.882345.50911399 1.614955 1.2417713 2.124036 2.124173l21.099094 36.57152808-23.135682 15.8357502c4.105694 3.2404436 6.948421 5.8686448 8.528184 7.8846038 1.579762 2.0159589 3.442094 5.5716267 5.58699
SVGの見た目は「属性」で書く――HTMLとの違い
SVGはCSSよりも後に登場した仕様なので（SVG 1.0が2001年リリース、CSS 2が1998年リリース）、いくつかの属性は普段CSSでなじみのあるプロパティとまったく同じ名前になっています。また、それ以外の属性名についても、ハイフン「-」区切りとなっており、CSSプロパティ名の作法に則っています。SVGの属性名は、当時としてはモダンなルールで決められたわけですね。 それぞれの属性がどのような表示になるのか、簡単に見ていきましょう。 塗り色を指定する「fill属性」 fill属性は、塗り色を指定する属性です。値にはCSSでも使っている「色」を指定します。fill-opacity属性を併用すれば、塗り色の透明度も指定できます。 <body> <svg width="320" height="200" viewBox="0 0 320 200"> <circle cx="40" cy="
SVGのオブジェクトごとにCSSで色を切り替える - わすれたあかんえ
デザインpsdを見ながらhtmlでコーディングするとき、たくさん画像を書き出しますよね。 たとえばpngのアイコンを作る場合、形が同じでも色が違えばpngファイルをたくさん書きださなければいけません。色だけ変えたものをひとつずつ、@2xサイズも用意してちまちまと……書き出して…… やってらんないっすよ！ せめて、形が同じなら使いまわしたい…… そう！SVGを使えば、同じオブジェクトを使ってCSSで色だけ変えたものを量産できるのです！ 「それだったらwebフォントでいいじゃん」と思われるかもしれませんが、webフォントはアイコンひとつにつき1色しか使えませんよね？SVGでやればアイコンひとつでも複数色使うことができます。 このSVGアイコンを使いまわして、 こんなかんじでカラフルなアイコンを量産しますよー！ ベクターでアイコンを作成 アイコン作るのがめんどくさい人はicomoonから適当なア
SVGでリアルな湯気を作ってみる ｜ Tips Note by TAM
もう7年ほど前になりますがFlashでサイト製作をしていた時代に、表現に悩まされるものがありました。 それが『湯気』です。 イラストを使った可愛い表現なら問題ないですが、リアルな感じを作ろうと思うとこれがなかなか難しい。最近では動画やアニメGIFなどで代用されていたりすることも多いと思いますが、今回はそんな素材がない時に使える 『SVGで作るリアルな湯気』 を紹介したいと思います！ See the Pen Steam by uenaka (@uenaka) on CodePen. SVGで湯気を書く まずはSVGで湯気の形を自由に書いてみてください。 難しく聞こえるかもしれませんが、後々ボカして使用しますので形に拘る必要はありません。 参考までに私が書いてみた湯気がこちらです。 SVGにanimateを追記して動す よりリアルな動きに見せるため、SVGで書いた湯気を動かします。 ここも動き
グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing
これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい！！という一心でやっています。 これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i
実装が非常に簡単！アニメーションに対応したSVGアイコンと埋め込みコードがセットになったライブラリ -Titanic
アニメーションするSVGアイコンもそれを実装するJavaScriptも、ゼロから作成すると時間がかかります。 Webページやスマホアプリでよく使用するさまざまなアイテムが用意された、アニメーションに対応したSVGアイコンと埋め込みコードがセットになったJavaScriptのライブラリを紹介します。 実装は非常に簡単で、SVGやJavaScriptが苦手な人でも問題無しです。
手書き風SVGアニメーションを簡単に実装できる「vivus.js」 | WebClips_Design
手書き風SVGアニメーションを実装できる「vivus.js」が色々と活用できそうなので忘備録。アニメーションタイプもDelayed・Sync・OneByOneの3タイプ、Easing functionも用意されており、多彩なバリエーションのアニメーションを実装することができます。
SVGのキャラクターを parallax.js で動かしてみる ｜ Tips Note by TAM
先日弊社TAMサイトをリニューアルしましたが、ご覧いただけましたでしょうか？ サイトリニューアルにあたり404ページでTAMくんの顔をマウスの動きに合わせて動かすというものを作ったので、今回はそれを紹介したいと思います。 デモを見る Parallax.js 使用したのはjQueryプラグインでもある「parallax.js」。 パララックスというと少し古い感じもしますが、これはカーソルを動かす（スマホだと傾ける）ことで要素に奥行き感を出すことができるので、ちょっとしたアクセントとして使うのもオススメです。 公式サイト http://matthew.wagerfield.com/parallax/ github https://github.com/wagerfield/parallax/ 実装 キャラクターをSVGで用意し、ソースを見て動かしたいパーツの位置（今回は目、鼻、口）を確認します
手書きのようなSVGアニメーションの作り方 -文字や図形を一筆書きのように線・ラインで描く
文字や図形、そしてイラストやロゴなどを一筆書きのように、線・ラインで描くSVGのアニメーションが驚くほど簡単に作成できるオンラインツールを紹介します。 下記のように一つずつ順番に描いたり、3つを同時に描いたり、タイミングをずらしたりもできます。 ※キャッチ画像なので、SVGアニメーションをGIFアニメにしたものです。 ラインで描くSVGのアニメーションをいくつか作成してみました。 まずは、SVGファイルを用意します。 シンプルな図形を描いたSVGのキャプチャ ※キャプチャなので、PNG画像です。 3つの図形を順番にラインのアニメーションで描いてみます。 イラストやモックアップをラインで描くアニメーションをよく見かけますね。
面倒なSVGのパスを簡単に作成できてしまう便利ツール -SVG Path Builder
面倒で複雑なSVGのパスでも簡単に作成できてしまう便利ツールを紹介します。 オンラインでもローカルでもどちらでも利用できます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
シンプルなパターンがたくさん揃ってる！商用無料で使えるSVGの背景素材 -Basic Pattern Repository
WebサイトやスマホアプリのUIでよく使用するアイコンのSVGコードをコピペで簡単に利用できる -Akar Icons
商用利用無料、UIデザイン用のSVGアイコンが1100種類！Adobe XDやFigmaのツールも完備されてて、これは便利
GitHub - benhowdle89/deSVG: Remove inline SVG bloat from your HTML document
こいつ動くぞ！商用利用無料、シンプルにデザインされたフォントもSVGも揃ったフリーのアイコン素材 -Box Icons
SVGを使った見たことない画面オーバーレイ効果実装デモ:phpspot開発日誌