A pocket-sized guide to using SVG icon sprites in web apps
There are many ways to handle icons — over the last few years we went through PNG sprite maps, icon fonts, and more recently, SVG embeds. Taking it one step further, let me show you a simple, yet powerful, vector-based technique. Start with exporting each of the icons using the same artboard size (e.g: 128x128):
マークアップ・エンジニアのためのSVG入門 | 第1回 SVGコードの基本
マークアップ・エンジニアのためのSVG入門 第1回 SVGコードの基本 この記事ではまずSVGのコードとしての基本と、さまざまな実装方法を概観してみましょう。それぞれの特徴を捉えられると、実装方法の選択が適切にできます。 はじめに SVGは、Android2.0系やIE8では対応していませんので、今の段階で気軽には使いづらい技術です。しかし、iOS Safari向けのWebページなど、限られた環境に向けては効果を発揮します。今回はマークアップエンジニアが知っておくべきSVGの仕様や使い方を見直してみましょう。 画像でありテキストである 「SVG＝スケーラブルなベクター形式」は、SVGの大きな特徴です。このことは多くの人が認識しているでしょう。 ラスタ形式は特に拡大に弱く、拡大するとドットが目立つ。一方、ベクター形式は拡大しても画像の劣化はない。 SVGにはソースコードが存在し、これにより画
Browser support for SVG symbol sprites
Using an external SVG sprite from HTML For the inline sprite, the first two icons are in an SVG element at the start of the page, and the last two in a SVG element at the end of the page. External sprite, default styles External sprite, styled Inline sprite, default styles Inline sprite, styled Some test results
How to work with SVG icons
There are many ways to use SVG icons in HTML and CSS, and I haven’t tried them all. This is how we do it in our small front-end team at Kaliop. It works well for our needs, which include: Content and communication websites, often based on big CMSes, rather than full-JS web apps. Icons which are often simple, single-color icons (each potentially used in several different colors depending on context
Animating with React, Redux, and d3 | Swizec Teller
Senior Mindset BookGet promoted, earn a bigger salary, work for top companies Start with a free chapterGet a free chapter from the Senior Engineer Mindset book and a sample audiobook chapter, followed by a Senior Mindset 101 email course. Animating with React, Redux, and d3That’s a particle generator. It makes tiny circles fly out of where you click. Hold down your mouse and move around. The parti
Delivering Octicons with SVG
AI & MLLearn about artificial intelligence and machine learning across the GitHub ecosystem and the wider industry. Generative AILearn how to build with generative AI. GitHub CopilotChange how you work with GitHub Copilot. LLMsEverything developers need to know about LLMs. Machine learningMachine learning tips, tricks, and best practices. How AI code generation worksExplore the capabilities and be
アスキーアートエディタ Monodraw - WebDelog
Monodraw この記事は できる Mac OS X Advent Calendar 2015 の5日目の記事になります。 4日目は ワトソンさんで、Macのおすすめクリップボード拡張アプリでした。 この記事では Monodraw というアプリケーションを紹介していきます。 目次 Monodraw とは インストール方法 起動画面 レイヤー機能で位置の調整が楽 テキストバナー Attachment Points でダイアグラムを楽々作成 楽々コピペ Export 今日紹介したアプリケーション Monodraw とは Monodraw はアスキーアート用エディタです。キャンバス上に描画ツールを使って、スペースの数などを気にすること無く絵を書くようにアスキーアートを書くことができます。 インストール方法 インストールするには 公式サイトから購入するか、Trial 版をダウンロードします。 購
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
SVG Text Layout
Read it now on the O’Reilly learning platform with a 10-day free trial. O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers. Scalable Vector Graphics (SVG) is an image format, so text isn’t the first thing you might think of when considering its uses. But one of SVG’s key features is its ability to encode te
Rune.js Documentation
Rune.js Rune.js is a JavaScript library for programming graphic design systems with SVG in both the browser or node.js. It features a chainable drawing API, an unobtrusive scene graph, and a range of features aimed specifically at graphic designers: native support for color conversion, grid systems, typography, pixel iteration, as well as an expanding set of computational geometry helpers. Oh, and
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Grass-Graph / Imaging your GitHub Contributions Graph
GitHub - emilbjorklund/svg-weirdness: A repository of bugs and plain weird behavior in SVG
Safari greater 9 (desktop and mobile) downloads the external svg file for every icon on page · Issue #110 · jonathantneal/svg4everybody
Amelia Bellamy-Royds on Twitter: "FYI to #SVG nerds: So far, the at-risk list includes z-index for SVG and language switches for title & desc. Speak up if you want these!!!"
GitHub - fatiherikli/react-designer
GitHub - moarwick/react-mt-svg-lines: A React.js wrapper component to animate the line stroke in SVGs
GitHub - goessner/g2: A 2d graphics command queue micro-library.
GitHubの草のSVGをコマンドラインで取得する - Qiita
Loading...
GitHub - benogle/curve-app: Vector drawing desktop application
