コラム

SVGファイル変換備忘録

オリジナルのアイコンやイラストなどをサイト上で表示する際は、これまでは画像等で表現することが多かったのですが、SVGファイルというものが開発され(少々久しいですが)、Appleの高解像度ディスプレー(Retina)でも綺麗に表示されるようになり重宝します。

1. イラストレーターで作成した図形をsvgで保存
2. IcoMoonサイトへアクセス
3. 右上のIcoMoonAppをクリック
svg
4. 左上のImport Iconsをクリック
svg
5. SGVファイルのアップロード
svg
6. 左上のアイコンをクリックしてから右下のGenerate Fontをクリック
svg
7. 右下のDownloadをクリック
svg
8. Zipファイルを解凍すると色々なファイルやフォルダが出てくるが、使うのはfontsフォルダとstyle.cssの2つ
style.cssをhtmlファイルへ読み込み、style.cssの下部にあるクラス名をコピー
svg
9. htmlファイルで上記クラス名を付与
svg
10. 結果

記事タイトル

正しい書式でYahooやGoogleと相性のいいホームページを制作します
  • 1SEOを充実させ集客を増やす
  • 会社やお店のPRをする
  • ネットショップ(ECサイト)の開業
  • ご自身で更新