[B! svg] okumuraa1のブックマーク

アイコンの管理が簡単に！たくさんのSVGアイコンを一元管理でき、編集もできる無料ツール -SVG Icon manager

SVGアイコンの管理ができ、編集もできる便利な無料ツールを紹介します。 Windows, macOS, Linux対応で、たくさんのSVGアイコンを一元管理できてしまう優れものです。 Norde -SVG Icon manager and editor Nordeの特徴 Nordeのダウンロード・インストール Nordeの使い方 Nordeの特徴 NordeはUIデザイナーもアイコン制作者も、アイコンを扱うすべての人のために構築された無料ツールです。複数のマシンでもアイコンを一元管理できるので、チームで使用するのにも適しています。 Nordeの特徴 SVGアイコンの管理 SVGアイコンをアイコンセット、グループを使用して管理できます。 SVGアイコンの編集 SVGアイコンのカラーやサイズを簡単に編集できます。 SVGアイコンのエクスポート .svg, .png, .jpg, .webp,

okumuraa1 2020/05/26

リンク

Cacooのエクスポート機能が4倍速くなりました！SVGの生成手法の刷新によるパフォーマンスの向上 | Cacooブログ

Cacoo開発チームの木村（@cohhei）です。Cacooでは図形の描画にScala ble Vector Graphics（以下、SVG）を採用しています。本記事では、CacooのサーバーサイドにおけるSVGの生成手法の刷新と、それによって得られた図のエクスポート機能のパフォーマンス向上についてご説明します。要約サーバーサイドでのSVGの生成方法を変更しました。結果として、SVGエクスポートが約4倍速くなりました。 PDFエクスポートもその恩恵を受けて早くなりました。図の内容に依存しますが、1シートあたり1.5〜2倍ほど高速化しました。技術的にはHeadless Chromeからjsdomを使ったSVG生成に切り替えました。クライアントサイドのTypeScriptのコードをNode.jsで実行させています。 SVG？エクスポート？生成？とは？ SVGとはXMLをベースとした2

okumuraa1 2020/04/06

リンク

Creating a Pencil Effect in SVG

Dragons Abound produces maps in SVG, which is a vector graphics format. Vector graphics have a lot of features (such as lossless zoom) that are nice for maps. And vector graphics are good for producing crisp, well-defined lines like an ink stroke: On the other hand, vector graphics are not very good at producing textures with a lot of non-repeating fine detail. In vector graphics, each drawn el

okumuraa1 2020/03/30

リンク

GitHub - mafumafuultu/svg.js: svg, circle, rect, path, animation...and more

okumuraa1 2020/03/25

リンク

CSS・SVGとVue.jsでのアニメーション作成入門 - ライブラリに頼らない表現力を身に付けよう - ICS MEDIA

※ CSS Animationに関してはWeb Animation APIを使うことでより簡単にJavaScriptからアニメーションを構築・制御できるようになります。2020年2月時点ではブラウザの実装が不十分でPolyfillを要するため、この記事では対象外としています。専用ライブラリを使わずにアニメーションを作ろう各ライブラリは特別な魔法を使っているわけではありません。原理的にはCSS・SVG・WebGLといった各要素技術をしっかりと習得すれば、専用のライブラリと同等のことができるばかりか、より高い自由度を手に入れながら軽量化を実現できる可能性もあります。また、専用のライブラリを利用する場合にも、基礎となる原理や各技術の得意不得意を知っていることは大きな武器となるでしょう。 Vue.jsを使ってCSSやSVGのアニメーションを書くとは言え、これらのアニメーションを土台の技術

okumuraa1 2020/02/26

リンク

svg要素の基本的な使い方まとめ

3.図形の描画と図形のグループ化 SVGにおいてはグラフィック描画の手続きをXMLツリーとして表現する．様々な要素の組み合わせで複雑なグラフィックを構成するのだ．本項では最も基本のpath要素とその他の基本図形要素，及びg要素による図形のグループ化について説明する．これらの要素はSVGを表示可能な全ての環境で動作し，簡単なグラフィックであればこれだけで十分に間に合う． path:パス図形の描画 path要素は任意の図形を表す．図形定義が柔軟に行えるが，円や四角などの単純な図形を描画するだけなら後述する専用の要素を使ったほうが良い．パス図形の定義 d属性には曲線を引く際のコマンド(パスコマンド)のリスト(パスデータ文字列)を指定する．パスデータ文字列の前から順にコマンドを実行し，得られた(曲)線に囲まれた領域をパス図形と呼ぶ．SVGにおけるグラフィックはこのパス図形を元に描画される． d属

okumuraa1 2020/02/25

リンク

Recreating The Arduino Pushbutton Using SVG And <lit-element> — Smashing Magazine

okumuraa1 2020/01/21

svg

リンク

A Trick That Makes Drawing SVG Lines Way Easier | CSS-Tricks

When drawing lines with SVG, you often have a <path> element with a stroke. You set a stroke-dasharray that is as long as the path itself, as well as a stroke-offset that extends so far that the entire stroked path appears hidden initially. Then you animate the stroke-offset back to 0 so you can watch it “draw” the shape. Figuring out the length of the path is the trick, which fortunately you can

okumuraa1 2020/01/15

リンク

全員にクリスマスプレゼント！クリスマスのアイテムがかわいくデザインされたSVGのアイコン素材

Icons8のご厚意により、当ブログ限定でアイコン素材を無料で配布します。今回はクリスマスも間近ということで、クリスマスのアイコン素材。クリスマスカラーでデザインされたかわいいアイコンで、当ブログ用にIcons8のデザイナー様が新たに作成したアイコンです。まずは、Icons8のご紹介。当ブログでもお馴染みなので、知っている人も多いと思います。Good Boyの良い子だけが使用できる独自ライセンスで、素敵なアイコン素材が無料でダウンロードできます。また、さまざまな便利ツールもリリースしており、最近ではVector Creatorがリリースされました。

okumuraa1 2019/12/16

svg
素材

リンク

Red Stapler

How to and tutorial videos of cool CSS effect, Web Design ideas, JavaScript libraries, Node.js, HTML, dev tips and much more!New videos upload weekly. Monday...

okumuraa1 2019/10/30

threejs
svg

リンク

Feather – Simply beautiful open source icons

Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an em phasis on simplicity, consistency and readability.