GitHub - frappe/charts: Simple, responsive, modern SVG Charts with zero dependenciesYou signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
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
Cropping Image Thumbnails with SVG
Our friend Aaron Parecki recently blogged about a technique he used for centering and cropping image thumbnails using CSS. It’s a clever technique used by WordPress (and many others), but it requires a containing element with explicit dimensions, making it less than ideal for responsive design. Using SVG, we can make a cropped image that still acts like an image. No CSS required, works in IE9 and
ZorroSVG - Put a Mask on it
The small print ZorroSVG has some minor pitfalls you should be a aware of: It only runs on browsers that support SVG 1.1 - which all the latest browsers do. Right now there are some subtle brightness differences in semi-transparent areas (maybe you can spot them in the example image's soft shadow). They might be gamma or color-profile related and I am still trying to improve on this. Some (older)
SnapFoo - SVG Animation Library
Getting Started Download SnapFoo and include it in your project after jQuery and Snap.svg. Once included, call the library for use by passing in the SVG container ID: var snapfoo = snapFoo("#theSVGContainer"); Animate The primary animation call that receives an element or group of elements to animate based on the FramesObj object. Any element that is animated that does not have an ID is appended t
SVG Style Inheritance and the ‘Flash Of Unstyled SVG’
SVG Style Inheritance and the ‘Flash Of Unstyled SVG’ On Using SVG Presentation Attributes To Provide Style Fallback for CSS Failure Scenarios Published on 01 Mar, 2016 | Takes approximately 7 min to read There are too few things not to like about SVG, and I don’t mean the things that browsers cause by incomplete or lack of certain features or buggy implementations. Yet you might sometimes get
PatternBolt
Patternbolt is a fine selection of SVG pattern backgrounds, packed in a single or SCSS (or CSS) file. The pattern is added in the ::after element and your original DOM's element still be inalterate and ready for manipulations. As .svg they weigh much less than .png or .jpg and they are also really easy to manipulate by CSS rules. As they are vectors they never pixelate, not even on a 4k display. T
Logo Vs. Icon: What Is the Difference? | Namecheap
Often used interchangeably, the branding terms “logo” and “icon” are not synonymous. They vary in appearance and purpose, but business owners might embark on their venture believing that a logo can do an icon's job. We want to clear up any confusion once and for all. Let’s take a minute to understand the logo vs. icon conundrum and explore some popular examples so you can give your brand exactly w
Using ARIA to enhance SVG accessibility - TPGi
Jaws 15 and Internet Explorer 10 is the best combination at present, although nested SVG images are not well supported. NVDA and Internet Explorer present the role, title and desc, but support is erratic with multiple images announced and repetition of the title and desc. In all other browser/screen reader combinations the SVG is ignored. ARIA enhanced SVG accessibility It is possible to enhance t
Structuring, Grouping, and Referencing in SVG — The<g>, <use>, <defs> and <symbol> Elements
Structuring, Grouping, and Referencing in SVG — The<g>, <use>, <defs> and <symbol> Elements Published on 03 Jul, 2014 | Takes approximately 9 min to read SVG comes with its own ways for structuring a document by means of certain SVG elements that allow us to define, group, and reference objects within the document. These elements make reusing elements easy, while maintaining clean and readable
Inline SVG vs Icon Fonts [CAGEMATCH] | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. If you’re building an icon system for a site, you have some options. If you know the icons need to be raster images, then you’ll likely be using CSS sprites. If the icons will be vector images (much more common these days), you have some options. Two of those options are usi
![Inline SVG vs Icon Fonts [CAGEMATCH] | CSS-Tricks](https://cdn-ak-scissors.b.st-hatena.com/image/square/d3413d27979db9730c62af2cea80b93bff45d129/height=288;version=1;width=512/https%3A%2F%2Fcss-tricks.com%2Fwp-json%2Fsocial-image-generator%2Fv1%2Fimage%2F168417)
SVG symbol a Good Choice for Icons | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Looking for a better way to do SVG icons? Inline SVG might be your best bet, which you can learn about in this more recent post. You could design an icon set where the icons all had the exact same aspect ratio. But that’s probably not typically going to be the case. The cont
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - danklammer/bytesize-icons: Tiny style-controlled SVG iconset (101 icons, 12kb)
GitHub - wireservice/leather: Python charting for 80% of humans.
Boxy SVG Editor
PerfCascade - SVG based HAR Waterfall Viewer
<bc-pie-chart>
Unicorn Blog
5 Gotchas You're Gonna Face Getting Inline SVG Into Production | CSS-Tricks
SVG for Everybody