web/svg の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• web/svg へ行く。
• web/svg の差分を削除

#author("2023-12-24T01:50:31+09:00","default:nemusg.pad","nemusg.pad")
#author("2025-08-25T00:43:25+09:00;2023-12-24T01:50:31+09:00","default:nemusg.pad","nemusg.pad")
* SVG [#n0b3cebe]

** Material iconsを使う [#u2575887]

とりあえずGoogleがApache Licenseで公開している[[Material icons:https://material.io/icons/]]を使ってみる
使い方は[[Material Icons Guide:http://google.github.io/material-design-icons/]]に全て書いてある

*** 準備 [#k72d62ec]

Photoshop等で表示させる場合は、[[MaterialIcons-Regular.ttf:https://github.com/google/material-design-icons/blob/master/iconfont/MaterialIcons-Regular.ttf]]をダウンロードしてインストールしておくと表示できるようになります。

[[デザイナーのためのGoogle Material iconsの使い方:https://cultureacademia.jp/design/474/]]

*** 表示させる [#wc05ee68]

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

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

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

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

#code_x{{
 <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年版:https://www.6666666.jp/design/20160218/]]

#code_x{{
@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');
}
}}

#code_x{{
<li class="elCart">
<a href="">ボタン名</a>
</li>
}}


#code_x{{
.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ファイルを編集する [#g3ba9947]

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

- https://vectr.com/
- https://boxy-svg.com/

** 参考 [#of639e91]

- https://qiita.com/yamamiweb/items/011d6b264a5af568783b

#include(parts/feedback,notitle)