webhack / 猫とウェブ技術が好き

javascriptやcssやHTML5とかサーバーサイドの技術やプロジェクトマネジメントとかウェブに関するマーケティングとかWEBを取り巻く全般を好きに書くブログ

130種類以上!WEBフレームワーク/ブランド/アプリのSVGアイコン "SVGPORN"

Font-AwesomeにはWEBのアプリ/フレームワーク/ブランドのアイコンが100種類以上登録されていますが、"SVGPORN"にはSVGでアイコンが100種類以上、登録されています。

f:id:tkosuga:20150702233128p:plain

ライセンスはCC0 1.0 Universal。著作権なしです。

全てSVGファイルですのでどんなサイズで表示しても、画像アイコンとフォントアイコンの両方よりもキレイに表示されると思います。


公式サイトのリンクです。

gilbarbara.github.io

githubのリンクはこちらになります。

github.com

SVGアイコンとフォントアイコンのどちらが優れているか?については以下URLに詳しく説明されていました。

Inline SVG vs Icon Fonts [CAGEMATCH] | CSS-Tricks

みなさんご存じの話を繰り返す事になるかも知れませんが

SVGはベクター形式のため画像ファイルなどラスタ形式のデータのように拡大した時にギザつかず滑らかに表示されます。フォントはSVGと同じくベクター形式ですがサイズ指定や文字のポジショニング、CSSの細かい指定などSVGの方が融通が効きます。

アイコンフォントがSVGアイコンよりも大きく優れているのは、アイコン数が多い場合の読み込み速度です。

アイコンフォントが1つのファイルに対し、SVGアイコンは基本ファイルが分かれていますのでアイコン数が多くなると圧倒的にアイコンファイルの方が速いです。※ただしインラインSVG(HTML埋め込みSVG)であれば外部ファイルのロードが必要なくなるためSVGの方が速いです。

ブランドのロゴを綺麗に表示したいデザイナーや開発者に嬉しいSVGアイコンのコレクションです。

数えてみると137種類のSVGファイルがありました。

  • angular-icon.svg
  • angular.svg
  • apache.svg
  • atom.svg
  • auth0.svg
  • autoprefixer.svg
  • aws.svg
  • babel.svg
  • backbone-icon.svg
  • backbone.svg
  • bash.svg
  • bem-2.svg
  • bem.svg
  • bootstrap.svg
  • bower.svg
  • brackets.svg
  • browserify-icon.svg
  • browserify.svg
  • browserstack.svg
  • capistrano.svg
  • chai.svg
  • chalk.svg
  • chef.svg
  • chrome.svg
  • codepen-icon.svg
  • codepen.svg
  • codeship.svg
  • coffeescript.svg
  • compass.svg
  • couchdb.svg
  • crossbrowsertesting.svg
  • css-3.svg
  • d3.svg
  • digital-ocean.svg
  • django.svg
  • docker.svg
  • ember-tomster.svg
  • ember.svg
  • emmet.svg
  • engine-yard.svg
  • es6.svg
  • eslint.svg
  • express.svg
  • firebase.svg
  • firefox.svg
  • flask.svg
  • flow.svg
  • flux.svg
  • forever.svg
  • git-icon.svg
  • git.svg
  • github-icon.svg
  • github-octocat.svg
  • github.svg
  • gitlab.svg
  • google-cloud.svg
  • google-developers.svg
  • grunt.svg
  • gulp.svg
  • haml.svg
  • handlebars.svg
  • hapi.svg
  • harrow.svg
  • heroku.svg
  • html-5.svg
  • io.svg
  • ionic.svg
  • jade.svg
  • jasmine.svg
  • javascript.svg
  • jetbrains.svg
  • jquery.svg
  • json.svg
  • jspm.svg
  • karma.svg
  • kraken.svg
  • laravel.svg
  • less.svg
  • lodash.svg
  • mariadb.svg
  • marionette.svg
  • markdown.svg
  • material-ui.svg
  • mdn.svg
  • memcached.svg
  • meteor-icon.svg
  • meteor.svg
  • mocha.svg
  • modernizr.svg
  • mongodb.svg
  • mysql.svg
  • nativescript.svg
  • nginx.svg
  • nodejitsu.svg
  • nodejs-icon.svg
  • nodejs.svg
  • nodemon.svg
  • npm-2.svg
  • npm.svg
  • nuclide.svg
  • oauth.svg
  • open-graph.svg
  • passport.svg
  • phonegap-bot.svg
  • phonegap.svg
  • php.svg
  • polymer.svg
  • postgresql.svg
  • puppet.svg
  • python.svg
  • q.svg
  • rails.svg
  • raphael.svg
  • react.svg
  • redis.svg
  • require.svg
  • rest.svg
  • ruby.svg
  • rubygems.svg
  • sass.svg
  • snap-svg.svg
  • socket.io.svg
  • stackoverflow.svg
  • stylus.svg
  • svg.svg
  • swift.svg
  • travis-ci-icon.svg
  • travis-ci.svg
  • vagrant.svg
  • vue.svg
  • w3c.svg
  • webpack.svg
  • webplatform.svg
  • wercker.svg
  • wordpress-icon.svg
  • wordpress.svg
  • yeoman.svg