Easy SVG Customization And Animation: A Practical Guide — Smashing Magazine
Developers often feel discouraged from editing SVG markup and experimenting with SVG animations, thinking it’s a significant time investment or they need to use a complex animation library to do so. In this article, Adrian showcases his favorite tricks, which make the process streamlined and fun. Scalable Vector Graphics (SVG) have been a staple in Web Development for quite some time, and for a go
Penpot: The Design Tool for Design & Code Collaboration
Penpot is the web-based open-source design tool that bridges the gap between designers and developers.
SVG Waves - Instantly generate waves
With this tool, designers and developers can create beautiful and dynamic wave patterns that can be used as a css wave background element, as an overlay effect, or as part of a more complex graphic design project. This tool is particularly useful for those who want to add a touch of creativity and uniqueness to their designs without having to spend hours creating complex graphics from scratch. SVG
How to Create Responsive SVG Images | Envato Tuts+
In this tutorial I’ll explain how to create responsive SVG images; more specifically, I’ll explain how to create SVG logos, icons, and images, which change depending on the screen they’re displayed with. Let’s begin with a demo. Here’s what we’re working towards (check out the full screen version for maximum effect): If you resize the container (hat tip to Rick Strahl for his jQuery Resizable plug
Morphing using SVG - Webkul Blog
To morph SVG we need more than 2 SVG having the same number of point or vertex, don’t delete or add a new node. <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 288 288"> <linearGradient id="PSgrad_0" x1="70.711%" x2="0%" y1="70.711%" y2="0%"> <stop offset="0%" stop-color="rgb(95,54,152)" stop-opacity="1" /> <stop offset="100%" stop-color="rgb(247,109,138)" stop-opacity="1" />
SVGator: Free SVG Animation Creator Online - No Coding
Discover the ultimate SVG animation platform. Animate illustrations, logos, icons, and more.No coding skills required. Animate in minutesIntuitive interface Packed with all the tools you need, SVGator is the ultimate SVG animation generator: a thoughtfully designed, intuitive interface, right at your fingertips. Quick workflow Take your SVG to a whole new level without writing a single line of cod
SVGアイコンを実用するために知っておきたい、リンク周りの記述方法
2014年6月30日 SVG 以前書いた「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」という記事でSVGの基本や効率よく使用する方法を紹介しましたが、実際にWebサイト内で使うにはもう少し具体例が必要だなーと思ったのでリンク関連を中心に補足します。基本的な記述方法を覚えて実用化していきましょう！ ↑私が10年以上利用している会計ソフト！ SVGにリンクを貼る SVGにリンクを貼りたい場合、単純に a タグで svg を囲んでもうまくリンクを貼ることはできません。svg タグの中のオブジェクトを a タグで囲み、xlink:href 属性でURLを指定する必要があります。 <svg ... > <a xlink:href="http://google.com"> <path fill="#1E899D" ... > </a> </svg> See the Pen SVG
SVG と背景色を使ってサイズやカラーが自在な汎用性のあるアイコンボタンを作る
SVG によるアイコンデータと CSS による背景色の指定を組み合わせてサイズやカラーを自在に変更可能なアイコンボタンを作るお話。あわせて主要 Web サービスのロゴデータを SVG で用意する方法や注意点なども。 透過 GIF や PNG 画像に背景色を組み合わせることでアイコンボタンのカラーバリエーションを簡単に作るっていうやり方は昔からありますが、これを SVG （Scalable Vector Graphics） でやることでサイズ変更にも対応しやすいやつを作るっていうお話。 手法的には目新しいことは何もありませんが、この前この Blog のデザインをリニューアルしたときに視覚的に左側サイドメニュー上部 （スマートフォン表示だと隠れてると思いますが） にある 「Follow」 メニュー部分で使ったので紹介。 やってることは簡単です。白抜きにしたい部分をそのまま白色、背景は透過するよ
HTML D3.js Layout - @//メモ
d3.layout とは？ † layout は、直接グラフィックを描画しない layout は、生データを中間形式に変換する function たとえば、pie layout の場合 d3.layout.pie() は、生データの配列を、対応する円グラフの中心角の配列に変換する 中心角の配列を d3.svg.arc() で、SVG のポリゴンに変換する 最終的にできた <path d="M123,456,780,..."/> がブラウザにより画面に表示される ↑ pie layout † https://github.com/kagyuu/D3JSExam/blob/master/D3JS-layout-pie.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Pie</title> <st
今年こそついにSVG元年？まだ間に合う！SVGの学習に役立つサイト紹介 - 聴く耳を持たない(片方しか)
先日AdobeからこのようなJavaScriptライブラリが公開されました Snap.svg http://plus.adobe-adc.jp/post-4817/ 以前から人気の高かった、IE6でもSVGを表示できるJavaScriptライブラリRaphaelの作者 Dmitry Baranovskiy氏による新たなライブラリで、Raphaelとの違いはSnap.svgではIEなら9以上対応とモダンブラウザを対象にしたこと。さらに自由度と表現力の高いことができるようになっているのが大きな特徴です。 こうしたJavaScriptライブラリがオープンソースで、そしてAdobeから公開されたのは大きなことでこれからSVGもどんどん普及していくのではないでしょうか。 まさに2013年こそついにSVG元年と言えるかもしれません*1。 ……とは言え、そもそもSVGってなに？という人もまだまだ少なくな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SvgPathEditor
Find, customize & generate common SVG icons for your project
Animate a Blob of Text with SVG and Text Clipping | CSS-Tricks
Creating an animated SVG Neon light effect
Boxicons : Premium web friendly icons for free