なのブログ

   

メンタル障害持ちながらA型就労で広告デザインやWebをしている人のブログ

カテゴリー: SVG

【SVG】WordPressでSVG形式を使う方法

WordPressでSVG形式は初期設定ではサポートされていません。しかしPNGやJPEGにない特性を活かしてはっきり鮮明にロゴなどを配置したい方も多いでしょう。SVGの作り方からメディアライブラリへのアップロードの許可、表示の仕方を書いていきます。 文字のアウトライン化は「書式」-「文字のアウトライン化」を選んでクリック。 「複製を保存」または「別名で保存」をクリック。 形式をSVG形式にして保 […]

Read More

SVGでローディングアニメーション

SVGはCSSアニメーションとほぼ同じようにしてアニメーションを設定できます。 以下の例は丸の大きさが徐々に変わっていくローディングアニメーションです。

CSSのinfiniteは無限ループです。デュレーションの値(infiniteの後)を書くことで3つのアニメーションを少しずつずらしています。 SVGは特別にローディングアニメーシ […]

Read More

SVGについて

スマホの普及などにより再注目されているSVG形式について授業で習ったのでまとめます。 Illustratorで描いてSVGで保存すれば一応SVGファイルは作れますが、余分なコードがたくさん出てきます。なのでここでは直接テキストでHTMLファイルに記述していきます。

信号機を描くコードをサンプルとして載せました。 ぞれぞれ解説します。 […]

Read More