先日紹介した新しいRSSアイコン
ですが、Feed IconsでダウンロードできるZIPアーカイブには、GIFやPNGといったラスタ画像の他に、SVGというXMLで書かれたベクタ図形のファイルも含まれています。
- ./default/feed-icon.svg (2005年12月31日14:38:42 1,128バイト)
オレンジ色、128px × 128px
- ./grayscale/feed-icon.svg (2005年12月29日02:06:18 1,081バイト)
グレースケール、128px × 128px
他に、JPEG、PSD、AI、EPS、SVG、PDFもあり。
このアーカイブに含まれているSVGは、縦横が128ピクセルでオレンジ色とグレースケールの2ファイルだけでした。でも、SVGはXMLで書かれているためテキストエディタで容易に編集できるじゃないですか!それに、Firefox 1.5にドロップするだけで、SVGは表示できるし。ということで、サイズを変更したり、色々な色のRSSアイコンを作ってみました。
また、タイニーボタン(ちっちゃいバナー)メーカのサイトである80x15 Brilliant Button Makerを利用すれば、アイコンイメージのアップロードができて、アルファベットも任意の値が入力できます。既にRSSアイコンを新しくされた方もいらっしゃるようですが、もしよければミントでも使って、タイニーボタンを作ってみてください。
- 概要
オリジナルアーカイブ内のデフォルト(オレンジとグレー)のSVGをベースに、サイズを変更し11色追加してみました。
アーカイブ内には、13色・2サイズのSVGとPNGが含まれています。
- 色
オレンジ、バイオレット、ミント、マゼンタ、ブルー、ライム(オレンジ色ベース)、
グレー、サーモン、ライトグリーン、スレートブルー、スカイブルー、ピンク、イエロー(グレースケールベース)、の13色。
- サイズ
11px × 11px
(
のようなタイニーボタン加工用)
32px × 32px 
- フォーマット
SVG、PNG
- アーカイブファイルの在処
Feed Icons 私製版(13色) - 『子供、いらない』付録SS
- オリジナルの入手先
Feed Icons
変更部分の解説
オレンジ色ベースで作った32ピクセル・ブルーRSSアイコン(feed_icon_mid_32_05_blue.svg)のSVGと変更点は、以下の通り。
32ピクセル・ブルーRSSアイコンのSVGと変更点
|
---|
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32px" height="32px" id="RSSicon" viewBox="0 0 256 256">
<defs>
<linearGradient x1="0.085" y1="0.085" x2="0.915" y2="0.915" id="RSSg">
<stop offset="0.0" stop-color="#2D70E3"/>
<stop offset="0.1071" stop-color="#317DEA"/>
<stop offset="0.3503" stop-color="#3795F6"/>
<stop offset="0.5" stop-color="#3A9EFB"/>
<stop offset="0.7016" stop-color="#317CEA"/>
<stop offset="0.8866" stop-color="#2B64DE"/>
<stop offset="1.0" stop-color="#295BD9"/>
</linearGradient>
</defs>
<rect width="256" height="256" rx="55" ry="55" x="0" y="0" fill="#155DCC"/>
<rect width="246" height="246" rx="50" ry="50" x="5" y="5" fill="#529CF4"/>
<rect width="236" height="236" rx="47" ry="47" x="10" y="10" fill="url(#RSSg)"/>
<circle cx="68" cy="189" r="24" fill="#FFF"/>
<path d="M160 213h-34a82 82 0 0 0 -82 -82v-34a116 116 0 0 1 116 116z" fill="#FFF"/>
<path d="M184 213A140 140 0 0 0 44 73 V 38a175 175 0 0 1 175 175z" fill="#FFF"/>
</svg>
|
なお、グレースケールの方が色指定箇所(stop-colorやfill)が少ないため、色合いの変更は多少容易でした。
本項は、資料をご覧ください。
本項は、SVGプラグインを使ってみたをご覧ください。