Sass製SVG爆速表示ライブラリのご紹介 - dwango on GitHub
こんにちは。ニコニコ生放送生放送フロントエンドシステムセクションのmisuken(GitHub/Twitter)です。 今回は10月に公開したsmart-svgとreact-sass-inlinesvgという2つのSVG表示ライブラリに関して、作成に至った経緯、ライブラリの特徴、工夫したポイント、パフォーマンス等の話をしていきたいと思います。 ライブラリを作成した経緯 これまでのSVGの表示方法 ニコニコ生放送ではこれまで、SVGを表示する際にはreact-inlinesvgというライブラリを使用していました。 react-inlinesvgは<img>のようにsrcにURLを渡して表示するタイプのライブラリです。 SVG要素がDOMに展開されるため、CSSからスタイルを適用できます。 react-inlinesvgのREADMEに書いてある使用例。 import React from '
DOODAD.dev
Use this tool to create unique, seamless, royalty‑free patterns. Choose a base style, then customize with colors, filters, and transforms. Each pattern style has it's own unique transforms. Play around to see what they do. Try sliding transform 'C' in the transform window. Click the 'shuffle' button to see the kinds of patterns you can make. You can export your patterns as SVG, CSS, and PNG. Feel
Multi-Colored SVG Symbol Icons with CSS Variables | frontstuff
Long gone are the days of using images and CSS sprites to make icons for the web. With the explosion of web fonts, icon fonts have become the number one solution for displaying icons in your web projects. Fonts are vectors, so you don’t have to worry about resolution. They benefit from the same CSS properties as text. As a result, you have full control over size, color, and style. You can add tran
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
deSVG
deSVG Remove inline SVG bloat from your HTML document. Style SVGs with CSS. SVGs still accessible without JavaScript. What does it do? deSVG takes the <img /> tags you supply. It then grabs, using AJAX, the raw SVG you've set in the "src" attribute and replaces that <img /> with the <svg /> it downloads. Include the JavaScript file on your page <script src="path/to/desvg.js"></script> Kick off deS
ブラウザーに優しくて、アニメーションを滑らかに
ブラウザーに優しくして、 アニメーションを滑らかに Brian Birtles, Mozilla Japan html5j October 2014, Tokyo Animation is awesome… Source: Christopher Price 2013, http://topherchris.com/post/55109717733 Animation is awesome… Source: icanhasGIF.com windfinder.com earth.nullschool.net healthmap.org/ebola/ 蔓延[まんえん] = spread (disease) ebolavideo.org ウィンドウを最小化する 逆に負担になります。うまくいかなかった冗談みたい。 Animation is awesome? HTC J 端末上の Firefox
安全でアクセシブルなアイコン・フォント
Translation of: Bulletproof Accessible Icon Fonts by Filament Group アイコン・フォントを利用する場合、あらゆるユーザーに適切にアイコンを提供しようとすると、かなり気をつける必要があります。そのフォントが読み込まれなかった時にどうなりますか？@font-faceがまだサポートされていないブラウザーでは？ どうすれば安全に(bulletproofに)アイコン・フォントを利用できるかをこれから解説したいと思います。 効率的で機能的なウェブサイトを制作するという、この終わることのない探求において、ベクター形式のアイコンを提供する手段として、簡便であるフォントを利用することが何度も提案されてきました。対して私達は通常ベクター形式のアイコンとしてSVGをIan Featherがブログ書いたような理由から選んで(また、薦めて)おり、既に
Scriptless Attacks – Stealing the Pie Without Touching the Sill
Scriptless Attacks – Stealing the Pie Without Touching the Sill Mario Heiderich, Marcus Niemietz, Felix Schuster, Thorsten Holz, Jörg Schwenk Horst Görtz Institute for IT-Security Ruhr-University Bochum, Germany {firstname.lastname}@rub.de ABSTRACT Due to their high practical impact, Cross-Site Scripting (XSS) attacks have attracted a lot of attention from the security community members. In the sa
HugeDomains.com
distilledhype.com is for sale Please prove you're not a robot
Welcome to ObjJob v2.1b :: ObjJob
ObjJob is a free tool for storing, browsing, and commenting on object hierarchies. Languages Anark Studio 2.5 [official site] DOM for scripting behaviors in Anark Studio version 2.5 D3.js [official site] A JavaScript visualization library for HTML and SVG DOM Level 2 Core [official site] The script binding for the W3C Document Object Model. DOM Level 2 CSS [official site] The script binding for th
外部のCSSを参照したSVGは思うように参照できるか - fragmentary
おおおお、なるほどー！ HTML -> CSS -> SVG -> CSS - Weblog - hail2u.net ただやっぱり、CSSの外部参照は厳しそうですね。 SVGから外部スタイルシートを参照するその他の方法 SVGから外部CSSを読み込む方法としては、記事にあるxml-stylesheet PIを使う他に、SVGの<style>要素を使うという手がある。SVGでCSS使う際にも @import が使えるので、そこから参照してやればよい。あ、XMLだから要素の内容はちゃんとCDATAセクションで囲ってね。 <style><![CDATA[ @import url(external.css); ]]></style> <svg:style>を使ったSVGファイルを直接開いたら、PIの例と同じようにChrome (dev), Firefox (beta), Opera (Next)
SVG Stacks | simurai
Image sprites are wildly used for downloading lots of icons or UI elements all at once with just a single HTTP-Request. But they are somewhat cumbersome to use because you have to calculate the background-position offsets. You can’t easily add, remove or reorder them with recalculating. Or change the size without a neighbour peeking in from the side. How could it be solved? Well, by stacking them
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - SoraKumo001/satoru
GitHub - vercel/satori: Enlightened library to convert HTML and CSS to SVG
Use an Emoji as the Mouse Cursor on a Website
GitHub - danklammer/bytesize-icons: Tiny style-controlled SVG iconset (101 icons, 12kb)
O'Reilly Media - Technology and Business Training
SVG as Data URI for background image - JSFiddle - Code Playground
Amazon.com: Html5 Canvass and Css3 Graphics Primer: Campesato, Oswald: Books
More preview enhancements for Windows Azure AD Premium - Active Directory Blog - Site Home - TechNet Blogs