Loading...
Gulpを使ったSVGスプライトのアイコンシステムとワークフローの作り方
SVGスプライトって、なんか複雑なイメージがありませんか？ 僕はそうでした。なんか、面倒くさそう。。。どこから始めて良いかわからない。。。といった感じでずっと手をつけられずにいました。 でも、今回やってみて思ったんですが、一度ワークフローを確立してしまえばアイコン管理がかなり便利になります。CSSスプライトの時よりも管理が楽になりますし、表示サイズや今後の高解像度対応を気にしなくて良くなるのも嬉しいですね。 SVGスプライトについての英語のリソースはあるのですが、説明が多く、とっつきにくいものも多い印象なので、ここではできるだけシンプルに必要なことだけをまとめてみたいと思います。 では、SVGスプライト・アイコンシステムのGulpを使ったワークフローの構築、始めましょう！ 目次 達成したいこと デモページ SVGスプライトの仕組み ブラウザサポート 用意するもの 導入ステップ 最後に 達成
拡張機能Snap.svg Animatorを使ってAnimate CCからSVGを書き出そう - ICS MEDIA
（注記）この記事で紹介の「Snap.svg Animator」はすでに公開が終了しています。この記事の内容はアーカイブとして残していますが、動作しないためご注意ください。 SVGエス・ブイ・ジーとはHTMLでベクターグラフィックスを扱えるテクノロジーです。JPEGやPNGなどのラスターデータに対し、SVGはベクターデータのため拡大縮小に強いことが利点です。本記事ではこのSVGを使ってHTMLでアニメーションを実現する方法を紹介します。 まず前提としておさえておきたいのは、SVGでアニメーションやインタラクションを実装するには比較的低レベルのAPIの理解が必要となるということです。SVG 1.1 仕様の学習コストが高かったり、コンテンツ開発時の生産効率が上がらないといった課題が考えられます。そのためアニメーションやインタラクション用途のSVGコンテンツの開発にはJavaScriptライブラリ
Tight Fitting SVG Shapes, the Present and Future | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. I have recently found myself wanting to tightly pack an SVG shape into an HTML container. By tight packing, I mean I want the outermost points of my shape to be right on the edges on the container, without anything going out of the container or getting cut off. The following
A Compendium of SVG Information | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. A huge pile of information about SVG. How to Use SVG These are overview articles covering lots of stuff relating to SVG. Why to use it and the basics of how to use it. Mostly: <img>, background-image, <svg>, <iframe>, and <object>/<embed>. Using SVG by me SVG on the Web — A
SVGアニメーションの現状 | POSTD
SVG（Scalabe Vector Graphics）の世界は魅力的です。そして、これを使ってできることや、これに用意されているオプションには圧倒されてしまうほどです。 SVGはXMLベースの2次元ベクター画像形式で、インタラクティビティとアニメーションをサポートします。言い換えると、SVGは図形やグラフをレンダリングするXMLタグで、その図形やグラフはHTMLの構成要素がそうであるように、インタラクトしたりアニメーション化したりできるのです。 SVGに関して、私がよく受ける質問の1つは、SVG画像のアニメーション化についてです。そのやり方だけではなく、それが何なのかということも聞かれます。ですから、現在の（そして未来の）SVGアニメーションの状況を見ながら、あなたが苦痛を感じずに行えるようなヒントやツールについてお話ししましょう。 同期マルチメディア統合言語、またの名をSMIL（Syn
Card Expansion Effect with SVG clipPath | Codrops
A morphing card expansion effect enhanced by a low poly background animation, using SVG clipPath and Trianglify. Today we are going to create a experimental grid layout with “cards” where we’ll animate the card expansion with a morphing effect on the cover image and follow its motion with a delightful animation of a low-poly pattern used as the background of the page. We are using Trianglify by Qu
A Practical Guide to SVGs on the web
Introduction We live in the age of pixels. As designers & developers of the web, pixels can be both our friends and our enemies. We want everything to look nice and sharp for anyone who uses any of the websites we work on, but we need to keep file sizes down for performance. There is pretty much only one way to go with icons, logos and illustrations on the web — SVG. Scalable Vector Graphics can l
無限スクロール向け雑なローディング画像
無限スクロールはちょくちょく実装することはあるが、追加するコンテンツの読み込みや挿入はともかく、ローディング画像の処理で悩むことがある。その表示の切り替えには実装と処理のどちらにおいてもそこそこコストがかかるからだ。かなり前に色々考えるのが面倒になり、常に表示しておくという雑な手をよく使うようになった。 Demo: Easy Loading Marker for Infinite Scroll デモでは90%ほどスクロールすると無限スクロールっぽくコンテンツが少し時間をおいてから追加される。コンテナーである#contentの最下部には常にローディング画像を背景画像として表示してあるので、特に操作することなく無限スクロールのためにコンテンツを読込中であることを示すことができる。SVGアニメーションでローディング画像を作ったためInternet Explorer 11では回らないが、おおまかに
Understanding And Manually Improving SVG Optimization | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post by Raymond Schwartz. Like it’s raster brethren, SVG should be optimized before being used on production sites. There are several great tools for that, but as Raymond is about to show you, the best results come from a deeper understanding and a little manual work
Sara Soueidan's Favorite CodePen Demos
One of the awesome developers I recently caught on to is Sara Soueidan. Her tutorials about SVG have been top class and she's taught me a lot about the excellence that is SVG. Since she's one of my SVG heroes, I thought it would be awesome to have her pick out some of her favorite CodePen demos. Enjoy! A few months ago, Chris Coyier shared his favorite CodePen demos right here on David's blog. A w
Optimising SVG images – Mozilla Hacks - the Web developer blog
SVG is a vector image format based on XML. It has great advantages, most notably it is lightweight. Since SVG is a text format, it can be viewed and modified using a simple text editor, and applying GZIP compression produces excellent results. It’s critical for a website to provide assets that are as lightweight as possible, especially on mobile where bandwidth can be very limited. You want to opt
Polylion | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post by Dennis Gaebel. Dennis created some pretty captivating polygon SVG effects on CodePen, and here he’ll share how he did it. Sometimes the things you least expect, gain the most attention as the case was with the Polylion I posted on CodePen. I figured the simpl
How to Create (Animated) Text Fills | Codrops
A tutorial on how to create various types of (animated) fills and strokes for text using different techniques including CSS and SVG. I like to think that the future is already here. We have already so many exciting possibilities in CSS and SVG that some time ago we could only dream about. For example, we now have many possible ways to create text with an animated fill! About a year ago the article
Inline SVG With Grunticon Fallback | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Grunticon 2 is out! It’s got a cool new website. Grunticon is a damn fine tool for building an SVG icon system. The workflow is like: Have a folder full of SVG icons Run Grunticon on that folder, which produces everything you need Put the bit of JavaScript in the <head> Use HTML like <div cl
Useful SVGO[ptimization] Tools
Useful SVGO[ptimization] Tools Published on 26 Jan, 2015 | Takes approximately 5 min to read One of the steps you need to do when working with SVG is optimizing the SVG code after exporting it from the editor and before embedding in on your web page. For that, several standalone optimization tools exits. The two tools I usually mention in my articles and talks are Peter Collingridge's online ed
![Useful SVGO[ptimization] Tools](https://cdn-ak-scissors.b.st-hatena.com/image/square/42a27b2e109dff8bc3f8c4893279f77991badee0/height=288;version=1;width=512/https%3A%2F%2Fsarasoueidan.com%2Fog.png)
SVG Advent Calendar 2014 - Adventar
今流行に乗りつつあるSVGについて。 初めて使ってみた人から、使ってみて思ったことなどなどなんでもOK。
Goodbye, Layout Invalidation: Animating SVGs With CSS Transforms | Charlie Marsh
<div style="transform:translate(2px, 3px)"> <svg> <circle fill="red"></circle> </svg> </div> <div style="transform:scale(2)"> <svg> <circle fill="blue"></circle> </svg> </div> Under this scheme, we'd regain all the benefits of cheap animation: as the browser is merely applying linear transforms to vanilla DOM nodes, there'd be no layout or painting required. Better yet: CSS Transforms are GPU acce
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
#137: SVG is for Everybody | CSS-Tricks
SVG Basics—Creating Paths With Curve Commands - Vanseo Design