Understanding And Manually Improving SVG Optimization | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post by Raymond Schwartz. Like it’s raster brethren, SVG should be optimized before being used on production sites. There are several great tools for that, but as Raymond is about to show you, the best results come from a deeper understanding and a little manual work
Learn how to deliver SVG icons to React using the Figma API
Figma is an amazing design tool. The most interesting and exciting feature, that was introduced last year, is the Figma API. The main idea is that by using the REST API, developers can get a whole bunch of information from the design project. There are many different ways to apply this information to your frontend project. How to access it and what to do with it we will reveal further. How does th
Zero-config code transformation with babel-plugin-macros · Babel
Babel started out as a transpiler to let you write the latest version of the ECMAScript specification but ship to environments that don't implement those features yet. But it has become much more than that. "Compilers are the New Frameworks" says Tom Dale and I could not agree more. We're seeing more and more compile-time optimizations for libraries and frameworks. I'm not talking about syntax ext
SVGファイルをズバッとReact Componentsに変換する - wadackel.me
Sketch なり Illustrator なりで作成した SVG のアイコン群を、React のコンポーネントとして扱いたくなりました。アイコンの数が少なければ、SVG のコードを手動でコピペしてコンポーネント化すれば良さそうですが、3 個くらいからもう辛くなってきそうです。 SVG を外部ファイル化して読み込むことも考えましたが、CSS でのスタイル指定が面倒になることや、HTTP リクエスト数を抑えるという点を考慮すると、やはりコンポーネント化しておくのが無難な気がします。 ただ、そこへ労力を割くのは微妙な気がするので、ある程度自動でズバッと出来ないかなと試してみたら、react-svg-converterを使うことで簡単に実現出来たので、その工程についてメモです。 前提 上記の様なアイコンセット(SVG ファイル)を React コンポーネント(JSX)化したい 書き出されるコンポ
CairoSVG
Convert your SVG files to PDF and PNG. About CairoSVG CairoSVG is: a SVG 1.1 to PNG, PDF, PS and SVG converter; a command-line interface; a Python 3.6+ library; known to work at least on Linux, OS X, and Windows; based on the Cairo 2D graphics library; tested using the W3C test suite; LGPLv3-licensed free software. Let's go! Install CairoSVG is available on PyPI, you can install it with pip: $ pip
SVGデータから背景画像を作れる「Plain Pattern」・・のUIがかわいい。 | バニデザノート
ミニマムなデザインがすごく可愛いです。 機能自体も、イラストレーターのパターン機能みたいにプレビューされるので サクサク作れちゃいます。 最近はsvgでパターンを配布されている場合も多いので、 pngへ変換できるのはありがたいですね。 ※htmlコードへ変換するものではないみたいです。 ご参考にどうぞ。 関連記事 最低限これだけ覚えればemmetの恩恵にあずかれるかもな考え方のヒント 2015/08/07 軽量でシンプルなレスポンシブフレームワーク「Skeleton」 2015/07/27 デザインで文化に切り込む、最近の斬新な神棚いろいろ。 2015/07/14 SVGデータから背景画像を作れる「Plain Pattern」・・のUIがかわいい。 2015/07/01 手描きの素材を自分でつくれるアプリ２個（フォント＆ブラシ） 2015/06/14 photoshopの画面分割がとっても
CSSとSVGで曇りガラスのような効果を作る
2011年の9月に「CSSとSVG filterでガラスっぽい効果をつける」というのを書きましたが、これはFirefoxのみを対象としたものでした。 そこで今回はできるだけ多くのブラウザに対応したものを作ってみます。 完成品Frosted glass effect with CSS & SVG 背景画像にはWetFoto.comによる#246 Wetlook with Beautiful Brunette in Leggings and Jacket. Girl in black jacket, white wetlook leggings and skirt in boots, get wet fully clothed in the sea.を使用しています（リンク先はFlickrです）。 この画像はCC BY-NC-SA 2.0でライセンスされています。 背景画像にはBeryl Ch
SVGを使用してる企業・団体のサイトを22ヶ国、160件以上調べてみた - 聴く耳を持たない(片方しか)
このダイアリーでは過去に何度かSVGの記事を書いているのですが、それに対する反響で SVGって未だに使ってるところを見たことが無い とか いつになったら使えるようになるのか 永遠に普及しなさそう みたいな意見をよく見かけます。 そうした反応にカチンときた……というほどではないのですが、納得してもらうには実例を挙げて反論するのが分かりやすいだろうな、と考えてSVGの利用状況を調査してみました。 かといって個人サイトの利用例を挙げるだけでは説得力がないでしょうから、著名な企業や団体でのSVG採用事例をリストアップしてみた次第です。 そしてもう一つの動機として、Webサイトの制作現場でSVGの導入を検討する際に、同僚や上司、またクライアントからの同意を得る・説得する手段としても、既に実際に利用している企業や団体を提示できれば話を進めやすいだろうな、……といった狙いもあります。 例えば あの有名な
Snap.svgで快適SVGアニメーション | 第1回 Snap.svgとは
はじめに SVG（Scalable Vector Graphics）というと、まず、「ベクター画像」という特徴を思い浮かべる人は多いでしょう。しかしSVGはただの画像ではなく、HTMLと同じくDOMを構成するのも特徴のひとつです。SVG（DOM）をJavaScriptで操ることで、インタラクティブなコンテンツを作ることができます。そのためのライブラリ「Snap.svg」について知識を深めましょう。 なお、このシリーズで紹介するサンプルは次のリポジトリにまとめてあります。併せて、参照してください。 GitHub - codegrid/2015-snapsvg SVGをJSで操作する SVGはHTMLと同じようにDOMを構成します。そしてそのDOMをJavaScriptで操作することができます。SVGを活用すれば、SVGならではのアニメーションが可能です。 このように、SVGは、斜めや曲線の表
テキスト
文字を描画する SVG において、テキストも基本図形と同様に一種のグラフィックスオブジェクトとして扱われます。 そのため、テキストが描画されるタイミングや座標などの概念は基本図形の要素と同じです。 テキストを表示するには text 要素を記述し、要素の内容に対して描画したいテキストを指定します。 テキストが描画される位置は x 属性と y 属性で定義します。 英語や日本語であれば、テキストの左側ベースラインを軸に描画されるでしょう。 <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="400" height="300" version="1.1"
WebフォントとSVGフォント
2. HTML5とWebフォント HTML5の概要 HTMLの10年振りの新バージョン（2011年 5月にLast Call、2014年にW3C勧告予定） www.w3.org/TR/html5/ 広義のHTML5はHTML5/CSS/SVG/WOFF から構成されるOpen Web Platformを指す Webフォントとは CSSフォント機構（@font-face）によりWeb ブラウザからダウンロード表示可能なフォント 対応フォントフォーマットはOpenType、SVG フォント、WOFFフォントなど 欧米では多くのWebフォントサービスがスタート 4. Webフォントの仕様 WebフォントのW3C標準仕様 CSS Level 2において1998年に導入 www.w3.org/TR/CSS2/ 策定中のCSS Fonts Level 3で機
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SVGR - Transforms SVG into React Components. - SVGR
The Best Way to Import SVGs in React
GitHub - wadackel/svg-to-jsx-with-gui: It's a tool to convert SVG to JSX on Web browser.
https://tondemodesign.com/bodymovin_svg_animation/
メールにはsvgを使わない方が良い - komagataのブログ
GitHub - canvg/canvg: JavaScript SVG parser and renderer on Canvas
GitHub - gilbarbara/logos: A huge collection of SVG logos
Create A Responsive Imagemap With SVG | thenewcode.com
SVGをIE等のブラウザ対応を考慮して使う方法まとめ（SVGのフォールバック画像など）｜2.IDEA
