ベクターグラフィックス-その他のIllustratorの機能と SVG

概要解説

その他の Illustrator の機能を利用して、さまざまな形を効率よく制作する方法と、SVG の書き出しを行います。

前提知識・習得済み技術

Illustrator の基本機能
HTML+CSS の基本知識
サーバー、FTP

授業目標

その他の Illustrator 機能（切り抜き、繰り返しなど）習得
SVG の特徴と使い方
トランプカード

授業資料

【課題】Illustrator でアイコン制作

トランプのマーク（ダイヤ・クローバー・ハート・スペード）を作成し、それぞれのマークを 1.〜5.の手順で html でブラウザに表示させてください。

トランプ課題

Illustrator で A4 横のアートボードを新規作成する。
それぞれのアイコンを制作。
アセットの書き出しで svg 書き出し。
svg をエディターで開け、余分なコードを削除する。
それぞれを html,css で読み込み表示させる。

早めに終わったら、アニメーションさせてみましょう。
SVG アニメーション（SMIL を使ったアニメーション） / Web Design Leaves

img タグ

<img src="SVGtest.svg" width="900px" />

object タグ

<object type="image/svg+xml" data="SVGtest.svg"></object>

インラインで使う

Illustrator でも、VS Code でも構わないので、SVG のコードを表示して

<svg>
	<path />
</svg>

のみが必要

CSS の background-image で読み込む

html {
	background-image: url(SVGtest.svg);
}

HTML ひな形

こちらの HTML を利用してください。
index.html

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8" />
		<title>トランプのマーク</title>
		<style>
			h1,
			h2 {
				text-align: center;
			}

			section {
				display: flex;
				justify-content: space-between;
				width: 60%;
				margin: 0 auto;
			}

			div {
				background-color: #efefef;
				width: 24%;
			}
		</style>
	</head>
	<body>
		<h1>SVGの読み込み</h1>
		<section>
			<div class="diamond">
				<h2>ダイヤ</h2>
			</div>
			<div class="clover">
				<h2>クローバー</h2>
			</div>
			<div class="heart">
				<h2>ハート</h2>
			</div>
			<div class="spade">
				<h2>スペード</h2>
			</div>
		</section>
	</body>
</html>

提出方法

締め切り：2021 年 8 月 4 日（木）
提出方法：
1. ロリポップのサーバーに FTP にて「insvg」フォルダでアップロード。
2. URL を wf1_00_svgicon.txt に記入し f81srv1 内の「SVG 利用」に提出。

前期提出課題

童話キャラトレース
バスケイラストトレース
企業ロゴトレース
動物アイコン（パスファインダー）
ポカリスウェットトレース（印刷物）
ショップカード（印刷物）
最終課題：トランプマーク SVG（FTP にてサーバー URL を提出）

Webデザイン学科
授業資料

ベクターグラフィックス
その他のIllustratorの機能と SVG

概要解説

前提知識・習得済み技術

授業目標

授業資料

【課題】Illustrator でアイコン制作

img タグ

object タグ

インラインで使う

CSS の background-image で読み込む

HTML ひな形

提出方法

前期提出課題

提出 URL

ベクターグラフィックス その他のIllustratorの機能と SVG

概要解説

前提知識・習得済み技術

授業目標

授業資料

【課題】Illustrator でアイコン制作

img タグ

object タグ

インラインで使う

CSS の background-image で読み込む

HTML ひな形

提出方法

前期提出課題

提出 URL

ベクターグラフィックス
その他のIllustratorの機能と SVG