SVGから複数のfaviconを出力したり開発環境用に色を変えたりする - Sexually Knowing
faviconやらapple-touch-iconやらいろいろ必要なアイコンが多い問題 開発環境と本番でfaviconを区別して事故を防ぎたい問題 ……などの話題がアイコン界隈にはあります。 SVGを使ってどちらも解決してみよう! のコーナーです。 必要なアイコンを生成する icon-genというnpmパッケージを使うとSVGからicoやらpngが生成できます。便利。 こういうかんじ: const results = await icongen(variant.src, destPath, { favicon: { sizes: [180, 192], }, }) 開発環境ごとにfaviconを変える ↑でSVGからico/pngを生成するグッズを手に入れたので、ソースのSVGを環境ごとに変えればよさそう。 こういうかんじ: const generateVariantSource = (v
SVG Essentials Examples
This repository contains interactive examples and other files created for SVG Essentials, 2nd Edition by J. David Eisenberg and Amelia Bellamy-Royds (O'Reilly, 2014). The repository also includes the examples used in a related post on the O'Reilly Radar blog. If you're reading the online version of the book, you'll see these examples embedded in your browser (they are hosted as Github pages). If y
Casino neu online with SVG Path Generator Polynomic
Neu Casino SVG Path Generator PolynomicHi! I’m a creative developer with a strong interest in modern JavaScript stack and Functional Programming. I’m a perfectionist constantly looking for technical challenges and I always try to produce a clean, well-documented, and tested code. If you are as passionate as I am about web development, let’s build something cool together! Check some of the tools th
ブラウザから SVGO で SVG ファイルを最適化できる 「SVGOMG」
SVGO は SVG ファイルから不要なデータを取り除いたりして最適化してくれる便利なソフトウェアですが、これをブラウザの画面から使えるようにしたのが、「SVGOMG」 です。 SVGOMG SVGOMG ： GitHub 例えば JPEGmini の Web 版とか TinyPNG のような画像最適化ツールがありますが、これの SVG ファイル向けですね。ブラウザから簡単に操作できますし、最適化オプションの適用も画面上で SVG ファイルの変化を確認しながら行えますのでわかりやすいと思います。 SVGO には下記のようなオプションが用意されていますが、 cleanup attributes from newlines, trailing and repeating spaces → 属性値内の重複する空白や改行を削除 remove doctype declaration → DOCTYP
SVG画像を書き出す際に重要な設定「小数点以下の桁数」とはなにか？ - 聴く耳を持たない(片方しか)
これはSVG Advent Calendar 2014の参加記事です。 昨日はmemocarilogのSaori Miyazakiさんによる「filter 要素の基本的な使い方と filter 要素をつかったモノクロからカラーへ変化するマウスオーバー効果を作る方法」でした。 第3日目は私 id:rikuo が担当します。 （※追記）第4日目はイロドルハナ(@shino212)さんの「はじめてSVGでアニメーションを作った時の話」です。 ちなみにまだ空いている枠はあるので、興味のある方は是非ご参加ください。 はじめにSVGはXMLをベースにしているためテキストエディタでも簡単に作れるとは言え、実際の制作は何らかのオーサリングツールを利用することがほとんどでしょう。 中でもAdobe Illustratorはベクター系ソフトウェアの代表的な存在で広く普及しています。このIllustratorか
Photoshop CCの画像アセット機能でSVGを書き出す裏技
SVG はモダンなWebブラウザーで表示できるベクター画像形式で、Retina ディスプレイや、タブレットでピンチアウトで表示拡大した時にも荒く見えないため、これから使用する機会が増えそうな画像形式です。 SVG は Illustrator で書き出すことができますが、これまで Photoshop ではプラグインなどを使わなければ SVG を書き出すことができませんでした。 しかし、Photoshop CCの「画像アセット」機能を使用して SVG を書き出す裏技を見つけたので紹介します。 準備 下記のファイルをダウンロードします。 Macの場合 Finder でメニューの［移動＞ホーム］を選択し、ホームフォルダを表示します。 そこに、generator.json ファイルを移動またはコピーします。 Windowsの場合 ユーザーフォルダ（ユーザー名のフォルダ）に移動します。 そこに、gen
SVGコードの効率的な編集環境 - Qiita
IllustratorやInkscapeもいいけど、せっかくSVGはxmlベースなんだから直接ソース編集しようぜ。 ということでMacユーザならおなじみのテキストエディタCotEditorちゃんでSVGを編集する環境を作ります。 従来のOS XでのSVG編集の不便な点 OS Xではプレビュー.appでSVGは開けないしSVGZはQuick Lookすらできない 「InkscapeとかIllustratorで編集できるよ」とは言ったものの: 独自にレンダリングするからブラウザで見るのと結果が違う (とくにスタイルシートとかは酷い) 所詮は画像編集ソフトだからコードは直接弄れないしアニメーションも無理 ちょっと見たいだけなのにソフトウェアの起動に時間がかかる 「qlmanageとかコマンドラインでPNGに書き出しできるよ」とは言ったものの: いちいちサイズを指定する必要がある 背景が透過されな
Gapplin
Give me SVG, and I'll render it. It's free! viewer for SVG Gapplin is made for SVG. It can handle also SVGZ and animation SVG. besides text editor It's the perfect way to use Gapplin as a live-previewer for SVG images besides editing them in your text editor. WebKit rendering Gapplin uses WebKit as the rendering engine. So you can get images just as you see them on web browsers. screenshots Previe
GitHub - 1024jp/svg-coteditor: pretty CotEditor macro suite for SVG editting
SVG Suite for CotEditor SVG編集のためのCotEditor用のスクリプトセットです。 SVGの カラーリング定義ファイル 、svgz形式への書き出し 、W3Cでの バリテーション 、base64エンコードをした 画像の挿入 、 テンプレート、プレビュー など CotEditorでSVGを編集する際にたいへん便利なスクリプトが詰まっています。 CotEditorをSVGエディタとして使う、そんなクリエティブ・ライフを応援するスクリプト・スイートです。 内容物 hallo.svg —— お試し用のSVGデータ README.md —— 説明書（この書類） screenshot.png —— スクリーンショット SVG/ —— スクリプトセット legacy previwer/ —— SVG Suite v0.6までで使われていた、SVGをSafariでプレビューするス
SIE 10を公開 - プラグインレスでSVGを表示する「SIE」開発ブログ
SIE 10 を正式に公開しました 本日、正式版として、SIE 10 を公開しました。ベータ版の10 betaで発生した不具合を、二つ、修正しておきました。 無償ダウンロード 以下のSourceForege.JPで配布しています。 http://sourceforge.jp/projects/sie/downloads/58913/sie10.zip/ 詳しくは こちらのリリース詳細をご覧下さい。 謝辞 この記事を読んでいる皆様へ。TwitterやFacebookでSIEを挙げていただき、本当に感謝しています。ありがとうございました。 今後の予定 デバッガのやり方に、新しい手法を確立できましたので、それを使って、バグを見つけていきます。
Protip: All browsers that support SVG background... - German for black
You’re about to read articles on the subject of building for the web by Ben Schwarz. Say you want SVG with PNG fallback for IE8? Do this: Extra credit: Heres a mixin for SASS to make it even gnarlyer. Update: Awesome people (@xavier_ho, @kylebarrow) from the internet have verified that the browser will only make a single HTTP request when using this technique. Update: Argh. Android 2.x browser wil
Advent Calendar 3日目:SVG画像を1キロバイトでも削るダイエット術！ - 聴く耳を持たない(片方しか)
これは GraphicalWeb (CSS, SVG, WebGL etc) Advent Calendar 2012 - Adventar への参加の記事です。 3日目の今日は私 id:rikuo がSVG画像ファイルの軽量化テクニックを取り上げてみます。 ちょっと長くなってしまったので、ご注意ください。 はじめに、SVGとは？ まず始めに、SVGとは何か？の簡単な説明です。 SVGとはScalable Vector Graphics（スケーラブルベクターグラフィックス）の略で、XMLを基盤に書かれた画像記述言語、またはベクター画像ファイルのことです。画像ファイルというと、JPEG、GIF、PNGまたBMPなどはよく知られていますね。それらの画像はピクセル（ドット）ごとに色を表現したもので、総じてラスター（ビットマップ）画像と呼ばれています。 対してSVGは座標や図形で扱うため、拡大・縮
svg要素の基本的な使い方まとめ
この文書ではsvgをhtml埋め込みデータとして扱う際の覚書として作成した．svgの要素と属性は実際の例を踏まえて説明したつもり． 注意事項 仕様はここを参照のこと． 本文書では実際の挙動を調べつつ自分なりの解釈が入っているため，多々間違いが入ってしまうかもしれないが，気にしない． スクリプトを使ってsvg要素の中身(ソース)を出力しているため，一部実際のコードと表示されるコードとの間に差異があるが，予めご了承いただきたい． 目標は見栄えのする図形をsvgの手入力でサラっと記述できるようになることなので，複雑な図形は素直にinkscape等専用のツールを使うと良い．ただ，ここで示したことはツールを使う上でも役に立つと思う．特にアニメーションなど． svg:ベクター画像のカンバスの定義，title:タイトル，desc:説明 html文書においてsvg画像を挿入したい場合,embed要素を用い
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
