ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/05/25
NEW
週刊ドットインストール(2023/05/25号)を更新しました!
2023/05/24
NEW
ポートフォリオ掲載可能!実案件をイメージした新クラス、『Webアプリ案件修行 ダミーデータジェネレータ編』をリリースしました
PREMIUM
【旧版】SVG入門
拡大縮小しても綺麗に表示されるSVGについてその基本的な記述方法を学んでいきます。
0%
新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
PREMIUM
SVG入門
拡大縮小をしてもきれいに表示されるSVGについて基本的な記述方法を学んでいきます。
0%
動画レッスン一覧
(14)
未完了
#01 SVGとはなにか?
(02:08)
無料公開中
概要
デモ
必要となる知識
レッスンで使用するツール
未完了
#02 インラインSVGを使ってみよう
(03:00)
無料公開中
<svg>
<rect>
閉じタグについて
図形の重なりについて
未完了
#03 viewBoxの設定をしてみよう
(01:59)
無料公開中
viewBox
未完了
#04 fillとstrokeの設定をしてみよう
(02:41)
fill
色の指定方法(色名、16進数、rgb、rgba)
stroke
stroke-width
stroke-dasharray
未完了
#05 style属性を使ってみよう
(02:59)
style属性
<defs>
styleの設定
未完了
#06 gでグループ化してみよう
(01:40)
<g>
未完了
#07 linearGradientを設定してみよう
(02:51)
<linearGradient>
<stop>
グラデーションの方向
未完了
#08 radialGradientを設定してみよう
(01:39)
<radialGradient>
未完了
#09 line, circle, ellipseを使ってみよう
(02:48)
<rect>の属性
<line>
<circle>
<ellipse>
未完了
#10 polyline, polygon, pathを使おう
(02:51)
<polyline>
<polygon>
<path>
未完了
#11 textを使ってみよう
(01:23)
<text>
未完了
#12 transform属性を使ってみよう
(02:59)
transform
translate
rotate
skewX, skewY
scale
未完了
#13 animateを使ってみよう
(02:31)
<animate>
アニメーション制御のための属性(attributeName, from, to, dur, repeatCount, begin)
未完了
#14 JavaScriptと連携してみよう
(02:40)
JavaScriptとの連携(onload)
ギャラリー
このレッスンについて
最終更新日
2013年5月9日
関連キーワード
(4)
基礎講座
(368)
初心者向け
(367)
SVG
(3)
ウェブサイト構築
(155)
このレッスンを共有する