私たちはプロジェクトをほぼ完全にベクターグラフィックスに移行しましたが、半年前はシンボリックフォントの熟練者でした（冗談ではなく、あまり忠実ではありません）。 この記事では、プロセスでどのような困難に遭遇したか、その原因、そして次のプロジェクトでSVGに切り替える必要がある理由を説明します。
私が言ったように、私たちはアイコンフォントが好きでした。 十数の問題がなければ、おそらくそれがさらに好きだっただろう。 しかし、フォントは簡単に接続して使用できます。フォントとスタイルをフォルダーに入れ、レイアウト<span class = "icon-search"> </ span>に書き込むと、アイコンが適切な場所に表示されます。 便利に！
アイデアとタスク
便利なことに、未来だけがベクターに属します。 SVGへの切り替えを検討したとき、私たちはプログラマーが好むテクノロジーではなく、インターフェースから始めることにしました。 Webプロジェクトのグラフィックスには何が必要ですか？ 彼女と仕事をすることは、どのように便利でしょうか？ この利便性は開発者と設計者で異なりますか？ スタンドアロン製品としてSVGアイコンのセットを作成する場合、どのような利点がありますか？
質問は問題の理解に役立ちました。 したいこと：
- WPのブログからRailsのWebアプリケーションまで、あらゆるプロジェクトにアイコンを簡単に接続できます。
- 宣言スタイルを使用します：「これはギアアイコンがあるべき場所です。」
- CSSを使用して色を変更し、アイコンを変換します。
- 手での作業を減らし、マシンにもっとシフトします。
はじめに
考えられるすべての接続方法の中で、最も信頼性の高いスプライトを選択しました。 次のようになります。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none"> <symbol id="foo-icon" viewBox="0 0 50 50">...</symbol> <symbol id="bar-icon" viewBox="0 0 50 50">...</symbol> ... </svg>
そして、fooアイコンは次のように表示されます。
<svg><use xlink:href="#foo-icon"></use></svg>
スプライトはdefではなくシンボルを使用して構築されるため、アイコンのビューボックスは1か所でのみ定義されます-スプライト自体で、アイコンを表示するときに指定する必要はありません。 さらに、これにより、ビューボックスの比率が常に同じであるため、デザイナーの外観をより詳細に制御できます。
Ruby on Railsで開発しているため、このフレームワークを使用してプロセスを自動化しました。 SVGファイル（以前はsvgoでクリーンアップした後）からスプライトを生成するレーキタスクと、コンパイルされたスプライトを接続してアイコンをレンダリングするためのヘルパーを作成しました。
当初、アイコンピッカーは開発中のプロジェクトの一部でした。 しばらくして、別のプロジェクトで同様の問題が発生し、別のプロジェクトで発生しました。 そこで、頻繁に使用するアイコンのセットを描画し、別のライブラリで選択し、プロジェクトだけでなく他のライブラリでも簡単に使用することにしました。
設計
プロジェクトデザイナーのromanshaminにキーボードを渡します。
こんにちは、Habr！
タスクを次のように作成しました。アイコンの実用的なセットを作成します。 ほとんどのサイトの日常生活に必要な基本的なアイコンのみ。 拡大鏡-検索、クロス-閉じる、それだけです。 2番目の制限：作者のスタイルで自慢しないでください。 それどころか、アイコンのスタイルを主流に溶け込ませて、最も適したものにしてください。
重要な隣人-テキスト
インターフェイスの構成上の世界では、テキストは絵文字に最も近いオブジェクトです。 これは強いつながりであり、開発中に無視するのは間違いです。 グラフィックのガイドラインとして、実験的なサンプルが必要です。 平均的な最新サイトのテキストが5年前のフェローとどのように異なるかを見てみましょう。
- セットが大きくなっています。 過去の12〜14に対して、現在は16〜24ピクセルです。
- フォントはより多様になりました。 さようならArial。
- 画面のピクセル密度が高いため、メインテキストにはライトスタイルがより頻繁に選択されます。 軽くて余分な光は 、 通常と競合します。
出典：Smashing Magazine。 2009年と2013年の本文コピーのセクション平均フォントサイズ。
サイトやアプリケーションの場合、sans-serifフォントはより馴染みがあるため、antiquaは除外します。 だから、ポートレート：大きくて軽いグロテスク。 私はHelvetica Neue Lightを選択します-すべてのインターネットフォントで最初に吹き飛ばします。
しかし、通常の大胆な顔はどうですか？
さらに制限が必要
輪郭と塗りつぶしの2つのスタイルセットを作成することにしました。 1つ目はライトフォントに適しています。 2番目は、通常から超脂肪への飽和を閉じます。 最初の方法は実用的ではありませんが、より多くの制限を課します。 それで、私たちは彼と会い、より多くの潜在的な問題を解決します。 彼から始めましょう。
2つのセットに関する決定は、CSSを使用してフォントの豊かさとスタイルに合わせて調整できる、スマートSVGアイコンに関する長年のアイデアに基づいています。 常識と実験により、予想外の時間を吸収する可能性のあるアイデアから過剰な脂肪を取り除き、すぐにできることに集中しました。
サイズ、光学系、明瞭度
次に、ベースの正方形と円のサイズを選択する必要があります。 これらの数値により、各アイコンの光学的重量が決まります。 光学重量は興味深いものです。 高さ15ピクセルの正方形と同じ直径の円の隣に置くと、円は小さく見えます。 効果を補正するには、円を大きくする必要があります。 正方形の場合、直径17ピクセルの円の光学的重みは近くなります。
一般に、理想的な条件下では、アイコンはサイズを必要としません。 理想的な数値は、副作用なしで増減します。 理想的なディスプレイ環境には無限の解像度があります。 完璧な環境で理想的なアイコンは、どんなサイズでもはっきりと見えます。
私たちはスクリーンを扱っています-低解像度の環境です。 網膜上であっても、経験豊富な目はピクセルを区別します。 グラフィックの世界では、重力のようなピクセルは、目に見えるすべてに影響します。 画面上の図形は、その輪郭の境界が画面のピクセルグリッドの境界と一致する場合に明確に見えます。 ピクセルが考慮されていない場合、ぼかしが発生します（左の図）。 したがって、基本サイズを選択する必要があります-明確な形状を作成するのに十分なピクセルがあるかどうかを知るため。
1つのアイコンに異なるSVG画像を保存し、それぞれを適切なタイミングで表示できることを言及する価値があります。 現在、 この技術を使用して、詳細な画像を大きなサイズで、よりシンプルに、よりシンプルに取得しています。 1つのアイコンのピクセルグリッド用に最適化されたいくつかのサイズを作成し、次にテキストのサイズに応じて切り替える予定です。 理論的には、フォントヒントのようなものかもしれません。
元のタスクに戻ります。メインテキストの一般的なサイズのほとんどに耐えられるように、ベースサークルのサイズを見つける必要があります。 テキストのサイズ、円の直径、文字のストロークの太さの3つの変数があります。 手で彼らの関係を整理するのは面倒すぎて、私は楽器を見ました -1日を失ってから5分で飛ぶ方が良いです。 ページに13から24ピクセルの碑文を配置し、その横にベースサークルがあり、スライダーをねじ込んで比較し始めました。
17pxのサークルを倒しました。 等高線は、碑文の資格を15〜20ピクセルに合格しました。 この範囲外のテキストは、アイコンの輪郭よりも細いか、太く見えます。 塗りつぶされた円は、ストロークの太さに制限がなく、13から22ピクセルの文字に適しています-それから、もう少し小さくなります。
スクリプトで、直径のデフォルト値として数値17を設定しているのは面白いです。 私が推測したことをすぐに知っていれば、時間を節約できただろう:-)
これで、Illustratorを開いて、作業ファイルの構成を検討し、補助グリッドを作成し、ピクトグラムを描画し、疑って再描画し、鮮明な画像を選択し、ベクターをクリーンアップし、光学重量を監視し、テキスト行の横にある新鮮なアイコンの表示を常に確認できます。 この狭いトピックは誰にとっても面白くないと思うので、ここで終わります。
ご清聴ありがとうございました！
私たちが直面している問題
gemの作成時に、Rubyで作成されたあまり知られていないsvg_optimizerを使用してsvgoを削除しました。 その後、この置換により、アイコンのレンダリング時にプロングが出現しました。オプティマイザーは、SVG構造を非常に熱心に最適化し、アイコンコードを複製しました。 その結果、1つではなく、2つが互いに重なり合っていました。
このパンクの後、svg_optimizerはsvgoに置き換えられ、svgoはmergePathsプラグインを無効にしました。これにより、アイコンの形状が損なわれました。
また、追加要素でアイコンをラップしました。これには2つの理由があります。 最初の問題は、jQueryがSVG要素のクラスを変更したがらないことでした（すべてがバニラJSで正常に機能します）。 2番目の問題は、イベントがSVG要素で直接キャッチされないことです。ラッパーでイベントをリッスンする必要があります。
現時点で解決できないものから：Safariでは、輪郭がわずかに「噛まれています」。
邪悪なアイコン
大きな製品を開発するという原則に従って、すぐにアイコンを作成しました。 対象読者と競争上の優位性が決定されました。 このプロジェクトはもともと無料であると想定されていました。 それにもかかわらず、私たちは自分自身に尋ねました：アイコンのためにお金を取ったなら、人が支払うことに同意するためにアイコンで何が良いはずですか？ これは、心を良い状態に保ち、「クールな機能」に気を取られないようにするのに役立ちました。
予備的な発表を行い、最初のフィードバックを受け取りました。 彼女のおかげで、わずか数日で、アイコンが著しく良くなりました。 私たちは、この機会を利用して、横枠を指摘し、修正に協力してくれたすべての人に感謝します。 皆さんのおかげで、オープンソースが大好きです、ありがとう！ :-)
今こそ、行商人と共有する時です。
WebサイトおよびWebアプリケーション用の無料のSVGアイコンセットであるEvil Iconsの紹介。 含まれるもの：開発者向けのNode.jsパッケージとRuby gem、デザイナー向けの.aiおよび.sketchファイル。
evil-icons.io
すぐに追加のスタイルをリリースし、独自のアイコンをセットに追加する機会を提供します。 GruntとGulpのプラグインを作成し、CDN経由で接続することを考えています。
* * *
アイコンは、フォントに似たパスに沿って展開します。 以前は、描かれたフォントが一般的でしたが、今日では誰もが他の人のデザインを使用しています。 現在、Webデザイナーは自分でアイコンを作成する可能性が低くなり、既製のセットを使用することが増えています。
間違いなく、SVGには独自の問題があります。 ただし、状況は改善される可能性が非常に高くなります。 ブラウザは、すでに表示されているSVGをますますサポートするようになります。 ピクセル密度の高い画面が多くなります。 数年後には、さらに高いピクセル密度のモニターが登場するでしょう。 ラスターを操作する人は、@ 2x-@ Nxでアセットを準備し、Nの大きさを知っている必要があります。
Evil Iconsは、次のプロジェクトで今すぐSVGに切り替える最も手頃なオプションです。