タグ

関連タグで絞り込む (1)

タグの絞り込みを解除

tipsとsvgに関するcumacumaのブックマーク (2)

  • IllustratorとIcoMoonでSVGスプライトのラクラク設定!

    2016年2月9日 Illustrator, SVG, 便利ツール 繰り返し使うSVG形式のアイコン等を表示する際に便利なSVGスプライト。しかし、symbol タグで囲んで…一つ一つにIDを付けて… viewBox 属性をコピペして…と、当にコーディングがめんどくさい!新規プロジェクトを始める度に設定するのが煩わしくなり、いろいろと楽する方法を試した結果、アイコンジェネレーターツールの「IcoMoon App」を使う方法に落ち着いたので、やり方を紹介したいと思います。 ↑私が10年以上利用している会計ソフト! SVGスプライトとは? SVGスプライトは、ロゴやアイコンなどの複数のSVG画像をひとつのファイルにまとめて保存し、使いたい時に呼び出す方法です。SVGなので、拡大縮小しても画質が劣化しません。詳細は過去記事「アイコンフォントからSVGへ!より手軽にベクター画像を表示しよう」に目

    IllustratorとIcoMoonでSVGスプライトのラクラク設定!
    cumacuma
    cumacuma 2016/02/10
    簡単コーディング
  • Adobe Illustratorで描いたイラストをSVGで実装する方法 - Hatsuka

    SVG Advent Calendar 2015 10日目の記事です。 先週も別のAdvent Calendarに参加していたのですが、先月参加したリクリイベントでSVGについてちょっと勉強したこともあり、こちらのカレンダーにも参加してみることにしました。 今回はリクリで教わったことをベースに、データの作成からサンプル作成までの流れをざっくりと書いてみます。 SVGって? XMLをベースにした、ベクター画像フォーマットです。 ベクター画像なので、拡大してもきれいなため、高解像度端末でもきれいに見えます。 対応環境 IE9~、Android3~で対応しており、その他のブラウザも最新版であれば問題なく表示されます。 (ちなみに、ChromeよりもIEの方がSVGのレンダリングがきれいだそうです。) 埋め込み方 埋め込み方は大きく見ると4つほどあります。 1.img要素としてHTMLに埋め込む

    Adobe Illustratorで描いたイラストをSVGで実装する方法 - Hatsuka
    cumacuma
    cumacuma 2015/12/27
    svgファイルの保存方法と環境設定について。」
  • 1