web/svg の履歴(No.1)

SVG#

Material iconsを使う#

とりあえずGoogleがApache Licenseで公開しているMaterial iconsを使ってみる 使い方はMaterial Icons Guideに全て書いてある

準備#

Photoshop等で表示させる場合は、MaterialIcons-Regular.ttfをダウンロードしてインストールしておくと表示できるようになります。

デザイナーのためのGoogle Material iconsの使い方

表示させる#

下記さえ書けば表示される。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

 <i class="material-icons">&#xE24D;</i>

CSSでbackgroundで表示させることもできるが、この方法だとcolorなどが指定できないのでSVGファイルを編集してアップロードする必要がある。これだとpngとあまり変わらない（滑らかな表示にはなる）。

<em>Menubar</em>

 em{background:url(../image/common/document_9px.svg) no-repeat;}

フォントファイルを読み込んで、beforeでフォントを指定する方法だとHTMLに追記せずに装飾変更も自由にできる。 IE6-8向けにeotファイルを読み込む必要はもうないんじゃないかなと思いますが、woff2/woff/ttfは必要そう。削るとしたらttf。

CSSのWebフォント指定に関する考察 2016年版

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2]] format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff]] format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf]] format('truetype');
}
<li class="elCart">
<a href="">ボタン名</a>
</li>
.elCart > a::before {
    position: absolute;
    content: "";
    font-family: "Material Icons";
    speak: none;
    font-size: 32px;
    line-height: 1;
    width: 26.8576px;
    text-indent: -1.1424px;
    top: 50%;
    margin-top: -16px;
    left: 0;
    color: #333;

SVGファイルを編集する#

オンラインで編集できるエディタがいくつかありますが、基本的に色や大きさの変更はCSSでやったほうが楽。

参考#