【授業メモ】SVG
SVGとは？
JPEGやPNGのようなビットマップデータではなく、illustratorで使われているベクターデータ式の画像記述言語。
画像を線や面などの図形の集合体として扱う。
テキストベースのため、CSSやプログラムで動かすことができ、アニメーションを簡単に作ることができる。
SVGのメリット
- データが軽い
- ディスプレイの性能に依存しない
- 拡大してもきれいなまま
- 動かすのが簡単でアニメーションにも向いている
SVGのデメリット
- 対応していないブラウザもある
- 写真はSVG化できない（ロゴやアイコンはできる）
SVGをillustratorで作る方法
①文字をアウトライン化する
文字データは書式そのままだと、そのフォントがないパソコンでは表示できないので、
位置などを決めたら最後にパスにしないといけない。
選択ツールで文字をクリック
書式＞アウトラインを作成 でパス化できる
②余分な部分をなくす
選択ツールで必要な部分を選択
オブジェクト＞アートボード＞選択オブジェクトに合わせる で余分な部分がなくなる
③別名で保存 ※web用保存ではない！
ファイルの種類を「SVG」にして保存
SVGオプションは、画像として使う場合はそのままOKを押す
作ったものをブラウザで開く。拡大してもキレイ！！！
DWで開くとこんなかんじ！おおお！HTMLっぽい。
ここにCSS書き込めば簡単に形を変えたり動かせる。簡単・・！
HTMLで表示させる場合は、普通にimgタグで表示できる。
background-sizeを使ってSVGを配置する
background-sizeで背景画像の大きさを変える
SVGはこれでサイズ変更することが多い
書き方ルール
background: #FFC url("../img/food.svg") no-repeat center/80px 80px;
background:色 画像パス 繰り返し 画像位置 /画像大きさ
の順で記述する
px指定の場合
background: #FFC url("../img/food.svg") no-repeat center/80px 80px;
スラッシュ忘れずに！
nth-childも使ってアイコンを三つ並べる
li a {
display: block;
color: white;
width: 100%;
height: 100px;
text-align: center;
padding-top: 70px;
box-sizing: border-box;
background:#FF9DCE url("../img/food.svg") no-repeat center 10px/50px 50px;
}
li:nth-child(2) a {
background:#FF9DCE url("../img/drink.svg") no-repeat center 10px/50px 50px;
}
li:nth-child(3) a {
}
★今日授業で出来なかったところ★
hoverしたときに透明っぽくするのは
li a:hover {
opacity:0.7;
}
★メモ★
ブログに書くって難しい。。あとで見返してわかりやすいように書き方も工夫したい。
お盆で休んでいたのでかなり休みボケしてたので、やっぱり毎日やることが大事。。
