SVGで青空文庫のタイトル「吾輩は猫である」をネオン風にしてみた

Pocket

つぶデコジェネレーターで以下のようなネオン風タイトルを作成しました

吾輩は猫であるネオン風タイトル

 

タイトルには青空文庫で公開されている夏目漱石の名作「吾輩は猫である」を使っています。

 

上記のようなネオン風タイトルが出力されるSVGのソース内容を解説していきます。

 

SVGソース内容

<!-- SVGフォントにRounded M+(http://jikasei.me/font/rounded-mplus/about.html)を使用しています -->
<!-- Licensed under M+ FONTS LICENSE(http://mplus-fonts.sourceforge.jp/mplus-outline-fonts/index.html#license) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewbox="0 0 506 253" style="enable-background:new 0 0 506 253;" xml:space="preserve" width="506" height="253" xmlns:svgjs="http://svgjs.com/svgjs">
	<style type="text/css">
		@font-face {font-family:roundedM;src:url("data:application/x-font-woff;base64,d09GRgABAAAADB1MAA4AAAAYXMwAAQAAAAAAAAAAAAAAAAAAAAAAAAA...")}
		.gauss2{filter:url(#AI_gauss_2);}
		.gauss4{filter:url(#AI_gauss_4);}
		.gauss6{filter:url(#AI_gauss_6);}
		.st1{fill:#FF7BAC;}
		.st2{font-family:roundedM;font-size:64.6692px;}
		.st5{fill:#FFFFFF;}
	</style>
	<filter id="AI_gauss_2">
		<fegaussianblur stddeviation="2"></fegaussianblur>
	</filter>
	<filter id="AI_gauss_4">
		<fegaussianblur stddeviation="4"></fegaussianblur>
	</filter>
	<filter id="AI_gauss_6">
		<fegaussianblur stddeviation="6"></fegaussianblur>
	</filter>
	<rect width="506" height="253" />
	<text transform="matrix(1 0 0 1 32.4983 154.0146)" class="gauss6 st1 st2">吾輩は猫である</text>
	<text transform="matrix(1 0 0 1 32.4983 154.0146)" class="gauss6 st1 st2">吾輩は猫である</text>
	<text transform="matrix(1 0 0 1 32.4983 154.0146)" class="gauss4 st1 st2">吾輩は猫である</text>
	<text transform="matrix(1 0 0 1 32.4983 154.0146)" class="gauss4 st1 st2">吾輩は猫である</text>
	<text transform="matrix(1 0 0 1 32.4983 154.0146)" class="gauss2 st1 st2">吾輩は猫である</text>
	<text transform="matrix(1 0 0 1 32.4983 154.0146)" class="gauss2 st1 st2">吾輩は猫である</text>
	<text transform="matrix(1 0 0 1 32.4983 154.0146)" class="text-1 st5 st2">吾輩は猫である</text>
</svg>

※上記コードの@font-faceのsrcはサンプルデータです。base64にエンコードしたデータの一部しか含まれていません。

styleとfilterタグ

<style type="text/css">
		@font-face {font-family:roundedM;src:url("data:application/x-font-woff;base64,d09GRgABAAAADB1MAA4AAAAYXMwAAQAAAAAAAAAAAAAAAAAAAAAAAAA...")}
		.gauss2{filter:url(#AI_gauss_2);}
		.gauss4{filter:url(#AI_gauss_4);}
		.gauss6{filter:url(#AI_gauss_6);}
		.st1{fill:#FF7BAC;}
		.st2{font-family:roundedM;font-size:64.6692px;}
		.st5{fill:#FFFFFF;}
	</style>
	<filter id="AI_gauss_2">
		<fegaussianblur stddeviation="2"></fegaussianblur>
	</filter>
	<filter id="AI_gauss_4">
		<fegaussianblur stddeviation="4"></fegaussianblur>
	</filter>
	<filter id="AI_gauss_6">
		<fegaussianblur stddeviation="6"></fegaussianblur>
	</filter>

フォントは自家製RoundM+を使用し、base64にエンコードしています。

base64にエンコードする方法は以下を参考にしてください。

WEBフォントをbase64にエンコードする方法

 

ぼかし効果

3〜5行目でfilterプロパティを指定し、10〜18行目までのぼかし要素のidをリンク先として指定します。

<fegaussianblur stddeviation="2"></fegaussianblur>

「fegaussianblur」はぼかし効果を出します。属性「stddeviation」にx方向、y方向のぼけの長さを指定します。一つしか指定しない場合はx、y両方向の長さを指定したことになります。

カラーとフォント

6行目はぼかす色を指定。7行目はフォントの種類とフォントサイズ。8行目は最前面テキストのカラーです。

 

 

rectとtextタグ

<rect width="506" height="253" />
<text transform="matrix(1 0 0 1 32.4983 154.0146)" class="gauss6 st1 st2">吾輩は猫である</text>
<text transform="matrix(1 0 0 1 32.4983 154.0146)" class="gauss6 st1 st2">吾輩は猫である</text>
<text transform="matrix(1 0 0 1 32.4983 154.0146)" class="gauss4 st1 st2">吾輩は猫である</text>
<text transform="matrix(1 0 0 1 32.4983 154.0146)" class="gauss4 st1 st2">吾輩は猫である</text>
<text transform="matrix(1 0 0 1 32.4983 154.0146)" class="gauss2 st1 st2">吾輩は猫である</text>
<text transform="matrix(1 0 0 1 32.4983 154.0146)" class="gauss2 st1 st2">吾輩は猫である</text>
<text transform="matrix(1 0 0 1 32.4983 154.0146)" class="text-1 st5 st2">吾輩は猫である</text>

1行目で背面の黒枠を指定します。

2行目が再背面のテキスト、8行目が最前面のテキストです。

最背面からクラス属性に「gauss6」「gauss4」「gauss2」を指定し徐々にぼかしの長さを短くしています。

 

以上、ネオン風タイトルのSVGソース内容を解説しました。

以前紹介した以下の記事を参考に文字ジェネレーターなどで使用してみてください。

イラストレーターでタイトルロゴを作成!SVG文字ジェネレーターを作る方法

 

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です