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

Pocket

文字ジェネレーターって面白いですよね。

文字を入力するだけで魅力的な文字デザインを自動で生成してくれるので、使うだけでテンションが上がります。

そんな事でテンションが上がるのは僕だけかしれませんが、今日は文字ジェネレーターを「イラストレーター」+「Bootstrap4」+「JavaScript」で簡単に作成する方法を解説します。

実装した文字ジェネレーターのサンプル

イラストレーターでタイトルロゴを作成しSVGコードを取得

上記のタイトルロゴをイラストレーターで作成し、SVGコードを取得していきます。

新規ドキュメントを作成する

任意の「幅」「高さ」を設定します。

ここではTwitterの画像サイズ「幅」506px、「高さ」253pxを指定しました。

長方形ツールで黒枠を設定する

長方形ツールを選択しアートボードと同じ幅（506px）と高さ（253px）に設定。塗りを黒にします。

文字ツールでテキストを設定する

文字ツールを使用しテキストを設定します。テキストは「文字の生成」にしました。

フォントは「源ノ角ゴシック JP」でフォントスタイルを「Heavy」、フォントサイズを「90pt」に設定。

文字を装飾する

「生成」の文字を選択して塗りを「レッド」に設定します。

SVGコードを取得する

別名で保存を選択する

ファイル形式に「SVG」を選択する

ファイル形式を「SVG」にして、「保存」をクリックします。

SVGコードを表示する

以下のSVGコードが表示されます

ここまでがイラストレーター設定となります。

Bootstrap4とJavaScriptで文字ジェネレーターを作成

ソースコード

<!DOCTYPE html>　<!-- HTML5のDOCTYPE宣言 -->
<html lang="ja">　<!-- lang属性 日本語であることを宣言 -->
<head>
	<meta charset="UTF-8">　<!-- 文字コードをUTF-8にする -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">　<!-- ビューポートを指定 -->

	<!-- タイトル -->
	<title>文字ジェネレーター</title>
    <!-- bootstrap4 CDN CSS -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">	
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-12">
				<!-- ------------------------------------------------------------------------- -->
				<!-- SVG要素 -->
				<!-- SVGフォントに源ノ角ゴシック（https://github.com/adobe-fonts/source-han-sans）を使用しています -->
				<!-- Licensed under SIL Open Font License 1.1 (http://scripts.sil.org/OFL) -->
				<!-- ------------------------------------------------------------------------- -->
				<div class="form-group mt-5 text-center" >

					<?xml version="1.0" encoding="utf-8"?>
					<!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
					<svg version="1.1" id="svg-generator" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
							y="0px" viewBox="0 0 506 253" style="enable-background:new 0 0 506 253;" xml:space="preserve" width="506" height="253">
						<style type="text/css">
							@font-face {font-family:SourceHanSansJP-Heavy-83pv-RKSJ-H;src:url("data:application/x-font-woff;base64,d09GRk9UVE8AEp4wAAkAAAAY...")}
							.st0{fill:#FFFFFF;}
							.st1{font-family:'SourceHanSansJP-Heavy-83pv-RKSJ-H';}
							.st2{font-size:90px;}
							.st3{fill:#FF0000;}
						</style>
						<rect width="506" height="253"/>
						<text transform="matrix(1 0 0 1 28 163.7373)"><tspan x="0" y="0" class="st0 st1 st2" id="text-1">文字の</tspan><tspan x="270" y="0" class="st3 st1 st2" id="text-2">生成</tspan></text>
					</svg>

				</div>
				<!-- ------------------------------------------------------------------------- -->
				<!-- テキスト入力・画像取得ボタン -->
				<!-- ------------------------------------------------------------------------- -->
				<div class="form-group mt-5 row">
					<div class="col-sm-6">
						<input type="text" class="form-control svg-text" data-target="#text-1" value="文字の" placeholder="文字を入力してください">
					</div>
					<div class="col-sm-6">
						<input type="text" class="form-control svg-text" data-target="#text-2" value="生成" placeholder="文字を入力してください">
					</div>
				</div>
				
				<div class="form-group mt-5 text-center">
					<button class="btn btn-info" id="create-image">画像を取得</button>
				</div>

			</div>
		</div>
	</div>

	<!-- ------------------------------------------------------------------------- -->
	<!-- モーダルダイアログ -->
	<!-- ------------------------------------------------------------------------- -->
	<div class="modal fade" id="svg-box">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">右クリック・長押しで保存</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">×</span>
					</button>
				</div>
				<div class="modal-body">
					<img src="" id="svg-image" style="width:100%;">
				</div>
			</div>
		</div>
	</div>



	<!-- ------------------------------------------------------------------------- -->
	<!-- JavaScript -->
	<!-- ------------------------------------------------------------------------- -->

	<!-- jQueryの読み込みを宣言 -->
	<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
	<!-- bootstrap4のJavascript読み込みを宣言 -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

	<script>

		//テキスト入力時のイベント　入力文字をSVGのTEXT要素に反映
		$('.svg-text').on('input',function(e) {
			let targetTspan=$(this).data('target');
			$(targetTspan).text($(this).val());
		});
		//画像取得ボタンクリック時のイベント　SVG要素を画像に変換し表示する
		$('#create-image').on('click',function(e) {
			//SVG要素をbase64エンコードしDataURI形式に変換
			let svgElem = document.getElementById('svg-generator');
			let svgStr = new XMLSerializer().serializeToString(svgElem);
			let svgBase64 = "data:image/svg+xml;base64,"
				+ btoa(unescape(encodeURIComponent(svgStr)));

			// HTMLCanvasElement オブジェクトを作成する
			let canvas = document.createElement("canvas");
			// CanvasRenderingContext2D オブジェクトを取得する
			let ctx = canvas.getContext("2d");

			// 新たな img 要素を作成
			let image = new Image();
			image.onload = function(){
				//Retina対応しているブラウザだと画像がぼやけるため2倍にする
				canvas.width = image.width*2;
				canvas.height = image.height*2;

				//SVG画像をCanvasに描画
				ctx.drawImage( image,0,0,image.width,image.height,0,0,canvas.width,canvas.height);

				//Canvasに描画されている画像をBase64にエンコードしDataURI形式でsrc属性に設定
				$('#svg-image').attr('src',canvas.toDataURL("image/png"));

				//bootstrap4のモーダルを表示
				$('#svg-box').modal();
			}
			// Base64にエンコードしたSVG画像を設定
			image.src = svgBase64;
		});

	</script>
</body>
</html>

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

実装した文字ジェネレーターのサンプル

ソースコードの構成

head部（外部スタイルシートなどの読み込みを宣言）

<head>
	<meta charset="UTF-8">　<!-- 文字コードをUTF-8にする -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">　<!-- ビューポートを指定 -->

	<!-- タイトル設定 -->
	<title>文字ジェネレーター</title>
    <!-- bootstrap4 CDN CSS -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">	
</head>

CDN（コンテンツデリバリーネットワーク）を利用してBootstrap4を読み込みます。

コンテンツデリバリネットワーク(英: content delivery network、CDN)とは、ウェブコンテンツをインターネット経由で配信するために最適化されたネットワークのことである。コンテンツ配信網とも。

ウィキペディアより

ヘッダー情報

<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-dark">
    <div class="collapse navbar-collapse justify-content-center">
        <ul class="navbar-nav">
            <li class="nav-item active">
            <a class="nav-link text-white" href="#"><h1 class="h5 font-weight-bold">文字ジェネレーター</h1></a>
            </li>
        </ul>
    </div>
</nav>

bootstrap4のナビゲーションバーを使用してヘッダー情報を定義します。

ナビゲーションバーについては以下のサイトで詳しく説明しています。

Bootstrap4 ナビゲーションバー(Navbar)の使い方を徹底解説

※5行目でタイトルを表示しています。中央にタイトルを表示するため少し特殊なやり方で実装しています。

コンテンツ情報

BODYにBootstrap4の基本要素を設定する

<div class="container">
    <div class="row">
        <div class="col-12">


        </div>
    </div>
</div>

divタグを入れ子にして、class属性に「container」クラス、「row」クラス、「col-12」クラスを指定します。

<div class="col-12">
　<!-- SVG情報、テキスト入力、ボタンを設定 -->
</div>

上記のdiv要素内にSVG情報、テキスト入力欄、画像取得ボタンを設置します。

SVG情報の挿入

<div class="form-group mt-5 text-center" >

    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" id="svg-generator" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
            y="0px" viewBox="0 0 506 253" style="enable-background:new 0 0 506 253;" xml:space="preserve" width="506" height="253">
        <style type="text/css">
            @font-face {font-family:SourceHanSansJP-Heavy-83pv-RKSJ-H;src:url("data:application/x-font-woff;base64,d09GRk9UVE8AEp4wAAkAAAAY...")}
            .st0{fill:#FFFFFF;}
            .st1{font-family:'SourceHanSansJP-Heavy-83pv-RKSJ-H';}
            .st2{font-size:90px;}
            .st3{fill:#FF0000;}
        </style>
        <rect width="506" height="253"/>
        <text transform="matrix(1 0 0 1 28 163.7373)"><tspan x="0" y="0" class="st0 st1 st2" id="text-1">文字の</tspan><tspan x="270" y="0" class="st3 st1 st2" id="text-2">生成</tspan></text>
    </svg>

</div>

上記1行目のdivタグを追加し、イラストレーターで生成したSVGを挿入します。

svgタグのidを変更し、width、height属性を追加する

<svg version="1.1" id="svg-generator" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 506 253" style="enable-background:new 0 0 506 253;" xml:space="preserve" width="506" height="253">

上記SVGタグのidを「svg-generator」に変更し、以下のwidth、height属性を追加します。

width="506" height="253"

@font-faceを追加する

@font-face {font-family:SourceHanSansJP-Heavy-83pv-RKSJ-H;src:url("data:application/x-font-woff;base64,d09GRk9UVE8AEp4wAAkAAAAY...")}

源ノ角ゴシックのフォントを利用するために@font-face規則を追加します。

※SVG内でWEBフォントを使用している場合の注意点

SVG要素をPNGなどの画像に変換する場合、srcプロパティに通常のURL形式で指定しているとWEBフォントが反映されません。

WEBフォントを正しく反映するためにはbase64にエンコードしDataURI形式でsrcプロパティに指定する必要があります。

base64に変換した源ノ角ゴシックのフォントデータが必要な場合は以下よりソースを表示してコピーしてください。

実装した文字ジェネレーターのサンプル

以下はフォントをbase64にエンコードする方法です。

WEBフォントをbase64にエンコードしSVGに埋め込む方法

tspanタグにid属性を設定する

<text transform="matrix(1 0 0 1 28 163.7373)"><tspan x="0" y="0" class="st0 st1 st2" id="text-1">文字の</tspan><tspan x="270" y="0" class="st3 st1 st2" id="text-2">生成</tspan></text>

「text」タグ内の２つの「tspan」タグにid属性を追加します。入力したテキスト内容をsvgに反映する際に、ここで設定した「id」が必要になります。

テキスト入力欄を実装

<div class="form-group mt-5 row">
    <div class="col-sm-6">
        <input type="text" class="form-control svg-text" data-target="#text-1" value="文字の" placeholder="文字を入力してください">
    </div>
    <div class="col-sm-6">
        <input type="text" class="form-control svg-text" data-target="#text-2" value="生成" placeholder="文字を入力してください">
    </div>
</div>

各divタグ、inputタグに上記のbootstrapクラスを設定します。上記の2行目、6行目のdivクラスに「col-sm-6」を指定しテキストを横並びに表示します。

inputタグに「data-target」属性を追加し、値には「svg」の「tspan」タグに追加したidを設定します。

画像取得ボタンを実装

<div class="form-group mt-5 text-center">
    <button class="btn btn-info" id="create-image">画像を取得</button>
</div>

divタグ、buttonタグのclass属性に上記のbootstrapクラスを設定します。id属性の値を「create-image」にします。

フッター要素の設置

<footer class="fixed-bottom text-center">
    ©<a href="/">文字ジェネレーター</a>
</footer>

BootStrapのモーダルダイアログ要素を設置します。

・「fixed-bottom」クラスを指定し画面下部に固定表示させます。

・aタグでトップページにリンクを張ります。

モーダルダイアログ要素の設置

<div class="modal fade" id="svg-box">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">右クリック・長押しで保存</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <img src="" id="svg-image" style="width:100%;">
            </div>
        </div>
    </div>
</div>

BootStrapのモーダルダイアログ要素を設置します。

1行目

<div class="modal fade" id="svg-box">

id属性の値を「svg-box」にします。

11行目

<img src="" id="svg-image" style="width:100%;">

imgタグを追加しidを「svg-image」にします。このタグにsvg要素を変換した画像を表示します。

Javascriptでプログラミング

<!-- jQueryの読み込みを宣言 -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<!-- bootstrap4のJavascript読み込みを宣言 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script>

    //テキスト入力時のイベント　入力文字をSVGのTEXT要素に反映
    $('.svg-text').on('input',function(e) {
        let targetTspan=$(this).data('target');
        $(targetTspan).text($(this).val());
    });

    //画像取得ボタンクリック時のイベント　SVG要素を画像に変換し表示する
    $('#create-image').on('click',function(e) {
        //SVG要素をbase64エンコードしDataURI形式に変換
        let svgElem = document.getElementById('svg-generator');
        let svgStr = new XMLSerializer().serializeToString(svgElem);
        let svgBase64 = "data:image/svg+xml;base64,"
            + btoa(unescape(encodeURIComponent(svgStr)));

        // HTMLCanvasElement オブジェクトを作成する
        let canvas = document.createElement("canvas");
        // CanvasRenderingContext2D オブジェクトを取得する
        let ctx = canvas.getContext("2d");

        // 新たな img 要素を作成
        let image = new Image();
        image.onload = function(){
            //Retina対応しているブラウザだと画像がぼやけるため2倍にする
            canvas.width = image.width*2;
            canvas.height = image.height*2;

            //SVG画像をCanvasに描画
            ctx.drawImage( image,0,0,image.width,image.height,0,0,canvas.width,canvas.height);

            //Canvasに描画されている画像をBase64にエンコードしsrc属性に設定
            $('#svg-image').attr('src',canvas.toDataURL("image/png"));

            //bootstrap4のモーダルを表示
            $('#svg-box').modal();
        }
        // Base64にエンコードしたSVG画像を設定
        image.src = svgBase64;
    });

</script>

1〜5行目

<!-- jQueryの読み込みを宣言 -->
<script src="//code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<!-- bootstrap4のJavascript読み込みを宣言 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

jQuery・Bootstrap4のjavascriptの読み込みを宣言します。

9〜13行目

//テキスト入力時のイベント　入力文字をSVGのTEXT要素に反映
$('.svg-text').on('input',function(e) {
    let targetTspan=$(this).data('target');
    $(targetTspan).text($(this).val());
});

テキスト入力時に発生するイベントをjQueryで取得しています。

処理内容

「svg-text」クラスの「data-target」属性より入力値を反映するSVGの「tspan」要素を取得
SVGの「tspan」要素に入力値を反映する

15〜46行目

//画像取得ボタンクリック時のイベント　SVG要素を画像に変換し表示する
$('#create-image').on('click',function(e) {
    //SVG要素をbase64に変換
    let svgElem = document.getElementById('svg-generator');
    let svgStr = new XMLSerializer().serializeToString(svgElem);
    let svgBase64 = "data:image/svg+xml;base64,"
        + btoa(unescape(encodeURIComponent(svgStr)));

    // HTMLCanvasElement オブジェクトを作成する
    let canvas = document.createElement("canvas");
    // CanvasRenderingContext2D オブジェクトを取得する
    let ctx = canvas.getContext("2d");

    // 新たな img 要素を作成
    let image = new Image();
    image.onload = function(){
        //Retina対応しているブラウザだと画像がぼやけるため2倍にする
        canvas.width = image.width*2;
        canvas.height = image.height*2;

        //SVG画像をCanvasに描画
        ctx.drawImage( image,0,0,image.width,image.height,0,0,canvas.width,canvas.height);

        //Canvasに描画されている画像をDataURI形式に変換しsrc属性に設定する
        $('#svg-image').attr('src',canvas.toDataURL("image/png"));

        //bootstrap4のモーダルを表示
        $('#svg-box').modal();
    }
    // Base64にエンコードしたSVG画像を設定
    image.src = svgBase64;
})

画像取得ボタンクリック時に発生するイベントをjQueryで取得しています。

処理内容

SVG要素をbase64にエンコードする
Canvasオブジェクトを作成し、Base64にエンコードしたSVG画像を描画する
Canvasに描画された画像をPNG画像に変換し、Bootstrapのモーダルダイアログに画像を表示する

以上が作成した文字ジェネレーターのイラストレーターとHTMLファイルのソース解説となります。

ジェネレーターを作りたい方にこの記事が何か参考になれば幸いです。

もしジェネレーターを作成して公開した場合はコメントやTwitterなどで連絡をいただけるととても嬉しいです。

Pocket

イラストレーターでタイトルロゴを作成しSVGコードを取得

新規ドキュメントを作成する

長方形ツールで黒枠を設定する

文字ツールでテキストを設定する

文字を装飾する

SVGコードを取得する

別名で保存を選択する

ファイル形式に「SVG」を選択する

SVGコードを表示する

Bootstrap4とJavaScriptで文字ジェネレーターを作成

ソースコード

ソースコードの構成

head部（外部スタイルシートなどの読み込みを宣言）

ヘッダー情報

コンテンツ情報

BODYにBootstrap4の基本要素を設定する

SVG情報の挿入

svgタグのidを変更し、width、height属性を追加する

@font-faceを追加する

tspanタグにid属性を設定する

テキスト入力欄を実装

画像取得ボタンを実装

フッター要素の設置

モーダルダイアログ要素の設置

1行目

11行目

Javascriptでプログラミング

1〜5行目

9〜13行目

15〜46行目

Related posts:

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル