SVGOMG - SVGO's Missing GUI
Global settings Show original Compare gzipped Prettify markup Multipass Number precision Transform precision Features Remove doctype Remove XML instructions Remove comments Remove <metadata> Remove xmlns Remove editor data Clean up attribute whitespace Merge styles Inline styles Minify styles Style to attributes Clean up IDs Remove raster images Remove unused defs Round/rewrite numbers Round/rewri
グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing
これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい！！という一心でやっています。 これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i
グーグルの旧ロゴは14,000バイトもあったのに、新ロゴはたった305バイトなのはどうして？
グーグルの旧ロゴは14,000バイトもあったのに、新ロゴはたった305バイトなのはどうして？2015.09.07 17:3022,413 SHIORI そんなに違うの？ グーグルの新ロゴが発表され、旧ロゴのファイルの大きさは14,000バイトだったのに対し、新ロゴはたった305バイトになったそうです。どうしてそこまで変わるのか？ UIデザイナーのIlya YakubovichさんがQ&AサイトQuoraでわかりやすく解説してくれています。 グーグルの古いロゴにはローマン体のフォントが採用されていて、セリフと呼ばれる飾り（線の端にちょこんと付いてるやつ）あるため、ベジエ曲線を使わないと作れないデザインでした。その結果、ロゴ全体でのアンカーポイントは100箇所。ファイルの大きさは6KB（6,380バイト）になり、圧縮しても2KB（2,145バイト）といったところです。 一方シンプルになった新し
Retina対応にSVGは本当に使えるのか？
高解像度スクリーンに対応できるのは嬉しいですが、普通の解像度しか持たない端末にも大きなファイルをダウンロードさせなければならないのは、3G回線などの遅い回線での表示パフォーマンスを考慮すると、SVGが適していないケースもありそうです。ただ、サーバ上でGZIP圧縮した場合、平均30%ほどサイズを削減できることを考慮すると、数十KBの差がある場合を除いて、表示パフォーマンスと表示クオリティのバランスもとれてくる気がしています。 ちなみに、Illustratorで「圧縮」を選択してsvgzとして保存すると2,395Bになりました。これならPNG8のファイルサイズにだいぶ近くて良い感じですね。Apacheの設定にSVGZが記述されていれば圧縮版を使えるので、このサイズだったら現実的な気がしてきました。ただ、サーバの設定がうまくいかないのか、Illustratorでの書き出しが悪いのか、SVGZを表
IllustratorとIcoMoonでSVGスプライトのラクラク設定！
IllustratorとIcoMoonでSVGスプライトのラクラク設定！繰り返し使うSVG形式のアイコン等を表示する際に便利なSVGスプライト。しかし、symbol タグで囲んで…一つ一つにIDを付けて… viewBox 属性をコピペして…と、本当にコーディングがめんどくさい！新規プロジェクトを始める度に設定するのが煩わしくなり、いろいろと楽する方法を試した結果、アイコンジェネレーターツールの「IcoMoon App」を使う方法に落ち着いたので、やり方を紹介したいと思います。 IcoMoon App SVG スプライトとは？SVG スプライトは、ロゴやアイコンなどの複数の SVG 画像をひとつのファイルにまとめて保存し、使いたい時に呼び出す方法です。SVG なので、拡大縮小しても画質が劣化しません。詳細は過去記事「アイコンフォントから SVG へ！より手軽にベクター画像を表示しよう」に目を
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
