【Mac】高画質でSVGからPNGに変換 - Qiitaはじめに 毎回忘れるので自分用のメモとして残しておきます。 Web上にSVGからPNGの変換サイトはいくつもありますが、画質が悪かったり、画像が小さすぎたりでほとんど使い物になりません。 SVGからPNGを簡単に変換できるコマンドを紹介します。 標準で入っているので何かをインストールする必要がありません。 コマンド
SVGスプライトアイコンの作り方・使い方 - 一休.com Developers Blog
この記事は一休.com アドベントカレンダー 2018の2日目の記事です。 qiita.com 宇都宮です。宿泊事業本部でフロントエンドの開発を行っています。 今回は、最近一休.comに導入した、SVGスプライトによるアイコンの作り方・使い方について紹介します。 StorybookのSVGスプライトアイコン一覧 アイコンの一般的な使い方 アイコンは、一般的に、以下のような方式で使用されると思います。 ビットマップ画像(gif, png等) アイコンフォント(Font Awosome等) SVG このうち、ビットマップ画像によるアイコンは拡大・縮小に弱いため、様々な解像度の画面に対応する必要のある現代には不向きです。アイコンフォントはベクター画像なので拡大・縮小に強く、豊富なアイコンがライブラリとして提供されているのが魅力です。SVGもアイコンフォントと同様のベクター画像ですが、フォントには
編集可能な SVG アイコンシステム — Vue.js
最終更新日: 2018年3月20日 基本的な例SVG アイコンシステムを作成する方法は多くありますが、 Vue の機能を活かす 1 つの方法は、編集可能なインラインのアイコンをコンポーネントとして作成することです。この方法のいくつかの利点は以下の通りです: 即座に編集することが簡単です アニメーション可能です 標準のプロパティやデフォルトを使用して標準サイズを保つことができ、必要ならば変更することもできます インラインなので、 HTTP リクエストは必要ありません 動的にアクセス可能に作ることができます まず、全てのアイコン用のフォルダを作り、簡単に検索できるように標準化された方法で命名をしましょう。 components/icons/IconBox.vue components/icons/IconCalendar.vue components/icons/IconEnvelope.vu
【Vue】svg画像をそのまま出力して色を変える - Qiita
Vue.jsでsvgを扱うときにはまった出来事です。 みなさんsvg使っていますか？ svgはどんな環境でもきれいに表示できますし、色もスタイルでかえられるので便利ですよね。 そのsvgをVue.jsで出力したいときにはいくつか方法があるかと思います。 テンプレートに直接書く imgタグのsrcにsvgファイルを指定する svgファイルをそのまま出力する エンジニアがsvgを書ける場合は1.の方法をとれば良いかと思うのですが、デザイナーがsvgを書いてそのファイルをそのまま読み込まなければならないこともあるかと思います。 そのときは2.か3.の方法になるのですが、2.では基本的に色を変えることができなく、svgのメリットを享受できません。(やる方法もないわけではないらしいですが) ということで3.の「svgファイルをそのまま出力する」方法を共有します。 方針 以下の方針で進めていきます。
グリグリ動く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
Draw Freely | Inkscape
初めての方へ パワフルでフリーなデザインツール イラストレーター、デザイナー、ウェブデザイナーなど、ベクターイメージを必要としている皆様に、Inkscape をオススメします。 柔軟性のあるドローツール さまざまなファイル形式との互換性 強力なテキストツール ベジエおよびスピロ曲線 Inkscape についてもっと知りたいですか? 機能の一覧をご覧になるか、今すぐ使ってみてください! Contributors 私たちのコミュニティに参加しませんか 私たちはいつも多くの方々からの支援に助けられています。あなたがコードを書けるなら、私たちの開発を助けてくださいませんか。コードを書く以外にもできることはたくさんあります: 機能のリクエスト バグの報告 ドキュメントの改善 より詳しい情報は 開発者向け セクションをご覧ください。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
vue-svg-loaderを使って画像をcomponent化させる - Qiita