A Friendly Introduction to SVG • Josh W. Comeau
SVGs are one of the most remarkable technologies we have access to on the web. They’re first-class citizens, fully addressable with CSS and JavaScript. In this tutorial, I’ll cover all of the most important fundamentals, and show you some of the ridiculously-cool things we can do with this massively underrated tool. ✨ Keep reading.
Release v4.0.0 · svg/svgo
It's been just over a year since our first release candidate, but I believe we can now release SVGO v4.0.0 with confidence! Thank you to all contributors who tested our RC builds and reported issues back up, this really smoothed out the process. We actually wanted to do the release sooner, but it was a challenge to find the right time to publish a major release, since that means setting time aside
Layer Cake
Layer Cake is a graphics framework for Svelte. It uses the measurements of your target div and your data extents to create scales that stay synced on layout changes. Use these scales to organize multiple, mostly-reusable Svelte components, whether they be SVG, HTML, Canvas or WebGL. Since they all share the same coordinate space, you can build your graphic one layer at a time. It can also be used
ズーム可能なSVGを実装する方法の解説 | 株式会社カブク
ソフトウェアエンジニアの畠山です。今回は，SVGに対して"Pan"と"Zoom"を実装する方法を解説します。 PanとZoomのためのライブラリはsvg-pan-zoomなどがありますが，今回はこういったライブラリを使用しないで実装してみます。 ※ Google Chrome 69でしか動作検証していません。 SVGのviewBox まず最初に，svgタグのviewBox属性についておさらいしておきます。なぜならこのviewBoxを使ってPanとZoomを実現するからです．viewBox属性は”min-x”, “min-y”, “width”, “height” の4つの数値リストをスペース区切り（もしくはカンマ区切り）で指定します． 例えば，viewBox属性に[min-x min-y width height] = [0 0 100 100] を指定すると以下のようになります。 <sv
Iconbuddy — Free and Open Source SVG icons
Search Engine for IconsOpen Source Icons: Search Fast. Edit Freely. Download Instantly.
Breaking Up with SVG-in-JS
Please don't import SVGs as JSX. It's the most expensive form of sprite sheet: costs a minimum of 3x more than other techniques, and hurts both runtime (rendering) performance and memory usage. This bundle from a popular site is almost 50% SVG icons (250kb), and most are unused. SVGs in JS have a cost and SVGs don’t belong into your JS bundle. It’s about time to bring back SVG-in-HTML. Let’s take
TinyVG Vector Graphics
An alternative binary encoded vector graphics format. Why another format? SVG is a horribly complex format and an overkill for most projects. The specification includes way too many edge cases so implementing a new SVG renderer will always have drawbacks or missing pieces. TinyVG tries to be simpler. Fewer features, but powerful enough to cover 90% of use cases. Features Compact binary encoding (3
SSSVG: An Interactive SVG Reference | fffuel
viewBoxcircleellipserectlinepolylinepolygonpathfill & stroketransformgdefsusesymbolclipPathmaskpatternlinearGradientradialGradientfiltermarkertexttspan viewBoxviewBox is an important attribute set on the <svg> element. It defines the coordinate system for the entire SVG. The value for viewBox is a set of 4 space-separated values: x-min, y-min, width and height. In the majority of the cases, x-min
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 '
SVG Security - W3C Wiki
Using SVG SVG can be fetched, embedded and used in different ways. SVG as image Markup languages like HTML (and SVG itself) can reference SVG as an image with the <img> tag (HTML namespace) or <image> tag (HTML or SVG namespace). If an SVG file is fetched as image, then certain requirements apply to this document: The SVG document is not allowed to fetch any resources. This also applies to scripts
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - zumerlab/snapdom: SnapDOM: DOM Capture Engine – Fast and Accurate HTML Conversion
https://svg.wtf/
Server Side Rendering - Cross Platform - How To Guides - Handbook - Apache ECharts
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
Text to SVG AI Generator | SVG.io
Svg drawing
SvgPathEditor
Boxy SVG
Intent to Deprecate and Remove: data: URL in SVGUseElement
GitHub - iconify/iconify: Universal icon framework. One syntax for FontAwesome, Material Design Icons, DashIcons, Feather Icons, EmojiOne, Noto Emoji and many other open source icon sets (over 150 icon sets and 200k icons). SVG framework, React, Vue and S
