SVGOMG - SVGO's Missing GUI
Global settings Show original Compare gzipped Prettify markup Multipass Number precision Transform precision Features Remove doctype Remove XML instructions Remove comments Remove <metadata> Remove xmlns Remove editor data Clean up attribute whitespace Merge styles Inline styles Minify styles Style to attributes Clean up IDs Remove raster images Remove unused defs Round/rewrite numbers Round/rewri
ほんのちょっと高度なSVGスプライトの使い方
当ブログではちょくちょくSVGについて書いていました。 （といっても、ほぼ月一更新なので、前に書いたのは1年くらい前かもしれませんが……） みなさま使ってらっしゃいますでしょうか？ 今回は「ほんのちょっと高度なSVGスプライトの使い方」と銘打って、『グラフィックのモジュール化』を行うための基礎的な考え方と方法をお伝えします。 ロゴにこそ、使ってみようSVGスプライト このブログでもロゴ（というレベルのクオリティではありませんが…）をSVGで表示させています。 また、お気付きの方もいらっしゃるかと思いますが、このトピックス「Web Resource」とその他のトピックスでは使用しているロゴの形状が異なっています。 しかし、これらはすべて「一つのSVGスプライトファイル」の中の「同一データ」です。 アイコン等をひとまとめにして、httpリクエストをみだりに増やさず、かつ非常に軽量（これだけのグ
Homepage | GSAP
GSAP allows you to effortlessly animate anything JS can touch. Delivering silky-smooth performance and unmatched support so you can focus on the fun stuff. GSAP allows you to effortlessly animate anything JS can touch. Delivering silky-smooth performance and unmatched support so you can focus on the fun stuff.
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
Designing A Flexible, Maintainable CSS Pie Chart With SVG — Smashing Magazine
Implementations usually involved either using an external image editor to create multiple images for multiple values of the pie chart, or large JavaScript frameworks designed for much more complex charts. Although the feat is not as impossible as it once was, there’s still no simple one-liner for it. However, in this article, Lea Verou will show you that there are many better, more maintainable wa
The Art Of SVG Filters And Why It Is Awesome — Smashing Magazine
There is a gap between pure CSS layout and custom design elements created in software such as Photoshop or Illustrator. Sophisticated SVG filters give us more independence from third-party design tools and bridge this gap by enabling us to create visual styles directly in the browser.Wouldn’t it be great if we could style letters the same way we usually style text with CSS? In this article Dirk We
「10分でわかるSVG 応用編」サンプル
<g fill="#c44" stroke="#822" stroke-width="2"> <circle cx="32" cy="32" r="30" /> <rect x="40" y="30" width="80" height="50" /> </g> <g id="s02"> <circle cx="32" cy="32" r="30" fill="#c44" /> <rect x="40" y="30" width="80" height="50" rx="10" ry="10" fill="#44c" /> </g> <use x="140" y="0" xlink:href="#s02" stroke="#ccc" stroke-width="2" /> <symbol id="s03" viewBox="0 0 120 80"> <circle cx="32" cy="
Janvas - the online svg graphic editor
{"unitKey":"PIXEL","unitValue":1,"drawingScale":1,"findAllElementAtPoint":1,"optimizeZoom":false,"mantainAspectRatio":true,"interactionLabelVisibility":true,"svgAlignmentPreserveAspectRatio":"xMidYMin slice","snap":{"distance":10,"offsetDistance":50,"snapToPoints":true,"snapToContour":true,"snapToPerpendicular":true,"snapToTangent":true,"snapToIntersection":true,"snapToCenter":true,"snapToGrid":tr
SVG Path Strings
SVG comes with several shape elements - rect, ellipse, line, polygon - that can create basic forms. To create a map, streamgraph or other more complicated shapes, path elements are used. Instead of specifying the size and position of a path element with attributes like height, radius or x as we do with the basic shapes, the geometry of the path element is determined by a single d attribute. This d
SVG Transformation
It is possible to transform the shapes created in an SVG image. For instance move, scale and rotate the shapes. This is a handy way of displaying vertical or diagonal text. Transformation Example Here is a simple example: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="50" y="50" height="110" width="110" style="stroke:#ff0000; fill: #ccccff" transform="
vivus.js - svg animation
vivus, bringing your SVGs to life Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearance of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like. View on GitHub Delayed Every path element is drawn at the same time with a small
Pocket Guide to Writing SVG
Thank You! I would like to take this entire section to give a special “Thank you so much!” to: CSS-Tricks Lincoln Loop Designmodo Tahoe Partners Una Kravets for recording the audio version! Your support for this book is so appreciated and I truly hope I have not offended any of you by potentially excluding your favorite fruit. Introduction Scalable Vector Graphics (SVG) is a language for describin
Using SVG to Shrink Your PNGs
07 Sep 2014 Wouldn’t it be great if you could get the compression of a JPEG with the transparency of a PNG? Well, you can, sort of. Here’s a little trick that I discovered while working on the new Sapporo Beer website. Notice how the beer can on the Sapporo website has a transparent area around the edges (it’s hard to notice but there’s a video playing behind it). As a PNG, the beer can graphic wo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - anvaka/panzoom: Universal pan and zoom library (DOM, SVG, Custom)
Yarrow — svg animated arrow pointer and tooltip
WordPress › Error
Building Better Interfaces with SVG
SVG animation tool | SVG Circus
the new code – not found – blog / 883
the new code – not found – blog / 886