読者です 読者をやめる 読者になる 読者になる

シアトルコンサルティング サービス開発ブログ

シアトルコンサルティング株式会社プロダクトソリューション事業部の開発ブログです

導入事例インタビューに行ってみた!

かなぴすの自社サービス開発奮闘ブログ



とある日の上司:「インタビュー一緒に行ってきて」



ということで、
現在SecuoNEOを導入いただいている企業様に
先輩2人と導入事例インタビューにいってきました!


事前のミーティングで
以前のインタビューのフィードバックを行い、(前回のインタビュー内容はこちら)
そこから次回どういうコンテンツにしていくかを話し合います。
写真のためにカメラの練習もします!



そして当日・・・
午後1時半、少し緊張しながらオフィスを出発です。

f:id:seattleservice:20170314103233j:plain:w400


少しと言いながら、かなり緊張していたのでしょうか
渋谷駅の目の前乗り換えではぐれ、
駅の階段を転げ落ちるように降り、たどり着きました。





・・・はい。





K先輩がインタビューを進めていきます。
SecuoNEOを導入するまでのセキュリティー教育の方法について、

セキュリティー教育の方法を変えようと思った経緯、

その中でSecuoNEOを選んでいただいた理由、

今どんな風にご利用いただいているのか・・・



「教育にかかる時間が少なくなった!」

「少しの投資で生産性が上がった!」

「マネージャー自らがコンテンツを選ぶことで、セキュリティーの意識が高まった!」


そんなお客様の生の声を聞いていると、
開発しているシステムが実際に多くの方に使っていただけているんだ
という実感が湧いてきたのと同時に、
そんなシステムを開発することに責任も感じました。



・・・とそんなことを思いながら、
インタビュー中周囲を見渡せば、
額に汗を流してシャッターをきる本日カメラ担当のA先輩が!



そんな先輩方の姿から、
自社サービスへの熱い思いを感じました。




ご利用いただいているお客様の声を聞くことができる機会って
すごく貴重な機会で、
そんな機会を大切にして、
これからもお客様のことを第一に考え、
より使いやすいSecuoNEOにしていきたいなと改めて思いました。



おまけ

導入事例インタビューに行った日が誕生日でした。
朝会社に行ってみると机がこんなことに・・・


f:id:seattleservice:20170314093243j:plain:w400


毎朝元気に全力疾走派の同期が
その日は早起きしてサプライズしてくれました^^
1日ハッピーガールなPCで仕事しました。笑



そして私が導入事例インタビューに行っている間に
清掃の時間があり、帰社してみると・・・


f:id:seattleservice:20170314094045j:plain:w300
上司があめちゃんまで整理整頓してくれていました。笑



■□セキュリティ教育支援サービスSecuo NEO□■
セキュリティ教育に興味のある方、お悩みの方、
Secuo NEOを使って社内のセキュリティ教育を改善してみませんか?
詳しくは下記サイトをご覧ください。 secuo.net

かなぴすの自社サービス開発奮闘ブログ

かなぴすの自社サービス開発奮闘ブログ

本社出勤日初日
(机に設置されているMacをみて)

「・・・あの、電源、どこですか・・・?」


はじめまして。
シアトルコンサルティングの16年度新卒かなぴすです。

突然ですが、これから未経験新卒エンジニアの私が
自社サービスを開発するにあたり日々奮闘する様子を
定期的にブログにして発信していきたいと思います。


なぜブログを書くのか?


未経験の新卒エンジニア目線での情報共有をするため

文系出身の未経験エンジニア。
ブログを書くには経験・知識不足過ぎると思われるかもしれませんが、
そんな私だからこそ伝えることができる情報があるはずだ・・・
ということで、開発の中で気づいたこと・戸惑ったことを
勉強しながらブログにまとめていきます。

自社サービスについて多くの人に知ってもらいたいから

自社サービスであるSecuo NEOを知らない方々に
Secuo NEOについて知ってもらいたいというのと、
今使っていただいている方に私たちがどんなことを考えながら
サービスを作っているのか少しでもお伝えできればなと思っています。

ちょっとした自己紹介


出身:兵庫県(就職のタイミングで東京にきました)
性格:マイペース
好きなこと:食べること、動画を見ること
これから勉強したいこと:JavaScriptPHP


入社後研修期間を終え、
その後8ヶ月間現場に出てJAVAの開発案件に携わっていました。
2月から本社に戻ってきて、
自社サービスであるSecuoNEOの開発を担当しています。

JAVAPHPWindowsMacと全く違う環境で、
日々躓き、勉強しながら開発をしています。

これから


次回からはもっと技術よりのことを記事にしていきます。
開発する中で学んだこと、自分で勉強したことを主に書いていく予定です。
よろしくお願いします。


■□セキュリティ教育支援サービスSecuo NEO□■
セキュリティ教育に興味のある方、お悩みの方、
Secuo NEOを使って社内のセキュリティ教育を改善してみませんか?
詳しくは下記サイトをご覧ください。 secuo.net



f:id:seattleservice:20170228180132j:plain

【SVG】SVGライフを充実させるあれこれ

SVG

こんにちは iijmyaです。またまたSVGについてです。

=============================== 目 次 ===============================

1.SVGデータをDataURI化
2.SVGデータから描画アニメーションを作成
3.SVG対応ブラウザとSVG非対応ブラウザでの出し分け

====================================================================

1.SVGデータをDataURI化

SVGファイルをDataURI化するには、前回の記事でも紹介しました、SVGOを使用します。
SVGOのインストール方法については前回の記事を参考にしてください)

下記のコマンドを実行すると、DataURIが書かれたテキストファイルが生成されます。

svgo --datauri=base64 svgファイル名 任意の名前.txt

あとは表示したい場所に埋め込んであげるだけです。

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiB2aWV3Qm94PSIwIDAgMjAwIDIwMCI+PHBhdGggZmlsbD0iIzFCOTdENSIgZD0iTS01MC00OS45OTloMzAwdjI5OS45OTloLTMwMHoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNzUuMDggOTAuMjQxbC0xMC41NzktOS4yNDYgNDcuODE1LTQxLjUydjE4LjQyOWwtMzcuMjM2IDMyLjMzN3ptNzkuMDk3IDEwLjAwM3YtLjAwOWwtNTAuMzAxIDQzLjY4NC0xNy4zNDYtMTUuMDYzIDE1Ljk2Ny0xMy44NjYgNy43ODEtNi43NTggMi41LTIuMTcgMjUuNTUzLTIyLjE5My0xMC45MTctOC45NTEtMzUuNDkyIDMwLjgyNS0xNi4wMDIgMTMuODk3LTguOTA1LTcuNzMxLTM2Ljg2LTMyLjAxNHYxOC40MjhsMzYuODYxIDMyLjAxNyA4LjkwNSA3LjczMSAxMC42MS05LjIxNXYxOC40M2wtLjAxMS0uMDA5IDE3LjM1NyAxNS4wNzUgMjYuNDkzLTIzLjAxMSAzNy4yMzktMzIuMzMzdi0xOC40M2wtMTMuNDMyIDExLjY2NnoiLz48L3N2Zz4=">

svg/svgo · GitHub

2.SVGデータから描画アニメーションを作成

SVGファイルから、その画像を描いているような描画アニメーションを生成してくれる、
Lazy Line PainterというjQueryプラグインがありました。サイトかわいい。
f:id:seattleservice:20140325154547p:plain


まずはGitHubからLazy Line PainterのJSファイルをダウンロードし、読み込んでおきます。
Lazy Line PainterではjQueryとRaphaëlを使用しているので、これも併せて読み込んでおきます。

<script src="jquery-1.9.1.min.js"></script>
<script src="raphael-min.js"></script>
<script src="jquery.lazylinepainter-1.4.1.min.js"></script>


次に、サイト上にあるコンバータから、描画アニメーションを作成したいSVGファイルをアップします。
サイトにも載っていますが、4000*4000px 40KB以内のファイルに対応しているそうです。
f:id:seattleservice:20140325160855p:plain

アップすると、アニメーションのプレビューと共にJSコードが生成されます。
f:id:seattleservice:20140325160920p:plain
色合いや線の太さを調整し、プレビューで確認することが出来ましたが、
生成されたJSコードには反映されないようです^^;

あとは生成されたJSファイル内で指定しているID名を持つdiv要素を作成したり、
自分で線の色や太さ・種類などのオプションを追加・修正し、
JSファイルとして保存するか、任意の既存JSファイル内に移してあげます。

オプション例)

  • strokeWidth…線の太さ (例: 1, 2)
  • strokeColor…線の色 (例: "#f55", "rgba(255, 180, 200, 0.8)")
  • strokeDash…線の種類 (例: "", "-")


最後に、対象のページでアニメーションが再生されれば成功です。
線の数が多いイラストの方が見ていて面白いアニメーションになりそうですね。

Lazy Line Painter
camoconnell/lazy-line-painter · GitHub

3.SVG対応ブラウザとSVG非対応ブラウザでの出し分け

モダンブラウザではほとんどがSVGをサポートしていますが、
Internet Explorerは8以下が非対応になっています。

こういったSVG対応ブラウザと非対応ブラウザでの画像の出し分けは、いくつか方法があるようです。

SVG画像とラスタ画像を用意しておき、Apacheで振り分ける方法
SVG導入のためのレガシーブラウザ振り分け -Blog //ヴォルフロッシュ

PHPと連動して、SVG画像をPNG画像に自動変換・置換してくれるjQueryプラグイン「SVGMagic」
SVGMagic - Great jQuery SVG fallback plugin

JSライブラリ「Modernizr」でSVG対応ブラウザかどうか判定して、自力で画像を差し替える
Modernizr: the feature detection library for HTML5/CSS3
Mastering SVG use for a retina web, fallbacks with PNG script

Retinaディスプレイなど多解像度に対応するためにも、SVGの導入をさらっと行いたいものですが、
まずは肝心のSVGファイルを作成するためにIllustratorの特訓をしなければ…

Wowza Media ServerをVagrant上で動かしてみた

satkakuです。
最近Ustreamやらなんやらを触ってたりしてたんですが、その延長で、ストリーミングサーバーのWowzaを使ってみようということになったので試してみました。環境はVagrant + Chefで構築して、そこにWowzaを入れています。相変わらず統一感の無いブログですね。

EngineManagerという管理画面から色々制御できるのですが、その辺の日本語情報があまり無かったので、インストールして、VOD(Video On Demand)で配信するまでを書いてみます。



(1) Vagrantを立ち上げる
今回はVagrantの記事ではないので、Vagrantの入れ方/使い方については省略します。

今回はCentOS 6.4 x86_64を使用しました。

Vagrantfile上で、割当メモリを適当に設定した後起動させます。

vb.customize ["modifyvm", :id, "--memory", "4096"]

(2) Chefる
今回はChefの記事ではないので(以下略

Java環境が必要なので、Javaのサードパーティクックブックだけ入れて、Vagrantに適用しておきます。JDKは7を入れときます。

とりあえずsshVagrantに入り、確認

$ java -version
java version "1.7.0_51"
Java(TM) SE Runtime Environment (build 1.7.0_51-b13)
Java HotSpot(TM) 64-Bit Server VM (build 24.51-b03, mixed mode)


(3) Wowzaの開発者版を落としてくる
ここで登録するとライセンスキーが書かれたメールが送られてきます。

ここLinuxインストーラをダウンロードします。


(4) インストール
sftpかなんかでVagrant上に上記のインストーラを置いた後、sshVagrantに入り、以下を実行します。

$ sudo chmod +x WowzaStreamingEngine-4.0.0.rpm.bin
$ sudo ./WowzaStreamingEngine-4.0.0.rpm.bin

利用規約とかを読んだ後、管理画面で使用するユーザーID、パスワードを求められます。それを入力すると最後にライセンスキーを求められるので、先ほどメールで送られてきたライセンスキーを入力します。


(5) 確認
http://localhost:8088/enginemanager にアクセスすると、管理画面が表示されます。

f:id:seattleservice:20140213142142p:plain

とりあえず画面指示に従ってNextを押して行くと、サインインを求められるので、先ほどのユーザーID、パスワードを入力します。


(6) Javaのヒープサイズ変更
なんか管理画面上で、貧弱すぎると警告が出るので、EngineManager上で1024MBに上げておきます。


(7) VODを試してみる
Applications => Add Application => Video On Demand => Single Server or Origin

アプリケーション名を求められるので、vodsampleとかつけておきます。
その後、サイドバーに追加されたvodsampleを選択すると、右上らへんに「Test Players」とか出るので、クリックすると様々な形式でのサンプル動画を見れます。

f:id:seattleservice:20140213144111p:plain

(8) iOSシミュレータでも見てみる
Wowzaは、HLS(HTTP Live Streaming)にも対応しているので、iOS環境でも見てみます。
とりあえずさくっとHTMLを書きます。

<video width="1280" height="720" src="http://127.0.0.1:1935/vodsample/mp4:sample.mp4/playlist.m3u8" preload="none" onclick="this.play()" controls />

srcのところはTest Players内のMobileタブの中に書かれています。
Apacheで上のHTMLを公開しつつ、iOSシミュレータで確認。

f:id:seattleservice:20140213143749p:plain


良かった良かった。
ライブストリーミングも試してみたいところなので、試したらまたブログ書きます。

Gruntでjadeコンパイルするときのあれこれ

grunt

こんにちは iijmyaです。

Gruntプラグイン'grunt-contrib-jade'でjadeファイルをコンパイルする際に、
jadeファイルで使いたい値をGruntfileから渡したり、あるディレクトリ以外のjadeファイルをコンパイルしたかったりしたので、自分なりにGruntfile.coffeeに書いてみました。

f:id:seattleservice:20140206161614p:plain


1.jadeファイルで使いたいオブジェクトをGruntfileから渡す

外部から変数を定義するときは dataオプションを使用します。

data: function(dest, src)
	return {
		from: src,
		to: dest
	}

この関数は宛先(dest)と送信元(src)を引数として持ち、データオブジェクトを返します。


例えばjadeファイル内で、ページによって異なるクラス名を付けたいシチュエーションがありました。
変数bodyに、コンパイルするjadeファイルの直近のディレクトリ名を渡したい…

body(class="#{body}")

今回コンパイルするのは以下のファイルで、publicディレクトリの下に配置されます。

  • src/jade/exam/index.jade -> public/exam/index.html

今回の実現したい事に対して、dataオプションは以下のように書いてみました。

data: (filepath)->
	dir = filepath.replace('public/', '').replace(/[^\/]+\.[^\/]+/, "");
	dir = dir.split("/").join("");

	return {body: dir}

宛先のパスを引数として受け取り、余分な文字をreplaceメソッドで削って、最終的にキーがbodyで値がディレクトリ名のオブジェクトデータを返しています。


実際にGruntでwatchをしつつ、src/jade/exam/index.jadeを更新して生成したhtmlを見てみると。。

<body class="exam">

ちゃんと値が入っていました!
dataオプションには、このように関数を定義してデータオブジェクトを渡す他にも、直接データオブジェクトを渡したり、JSONファイルを読み込む事も出来るようなので、詳しくは以下のサイトを見てみてください。
gruntjs/grunt-contrib-jade · GitHub


2.あるディレクトリ以外のjadeファイルをコンパイルする

このディレクトリに入ってるjadeファイル以外をコンパイルしたい…
だからといってコンパイルしたくないファイル以外をいっこずつ指定するのは面倒ですよね。
そんなときはglobパターンを用います。

  * : 0字以上の任意の文字列にマッチする
  ? : 1字の任意の文字列にマッチする
  ** : パスの一部を含む0字以上の任意の文字列にマッチする
  ! : 指定したパターンでない文字列にマッチする
  {,} : カンマ区切りのor条件として、いずれかの文字列を含むかどうかをチェック出来る


例えば以下のようなファイルがあるとします。

  • src/jade/index.jade
  • src/jade/exam/index.jade
  • src/jade/study/index.jade
  • src/jade/parts/layout.jade
  • src/jade/parts/header.jade
  • src/jade/parts/footer.jade

この場合、partsディレクトリ内のjadeファイルを指定するには以下のようになります。

	src: 'src/jade/parts/*.jade'

または

	cwd: 'src/jade/parts/'
	src: '*.jade'


今回実現したかった、「あるディレクトリ以外のファイルをコンパイルしたい」ですが、
partsディレクトリ内のjadeファイルはhtml単体では意味をなさないため、
partsディレクトリ以外のjadeファイルをコンパイル対象に指定します。

src: [
	'src/jade/**/*.jade'
	'src/jade/!parts/*.jade'
]


cwd: 'src/jade/'
src: [
	'**/*.jade'
	'!parts/*.jade'
]

この設定でコンパイルを行ったところ、

$ grunt
Running "watch" task
Waiting...OK
>> File "src/jade/parts/layout.jade" changed.

Running "jade:compile" (jade) task
File "public/exam/index.html" created.
File "public/index.html" created.
File "public/study/index.html" created.

Done, without errors.

partsディレクトリ内のファイルを更新してみても、
ちゃんとpartsディレクトリ以外のファイルがコンパイルされました!


Gruntfileの大まかな書き方さえわかってしまえば、
Gruntはプラグインも豊富なのでいろいろと便利になりそうですね。


今回のjadeタスクの全体像は以下になります。

# Gruntfile.coffee
jade: 
	compile:
		options:
			pretty: true   # インデント有効化
			data: (filepath)->
				dir = filepath.replace('public/', '').replace(/[^\/]+\.[^\/]+/, "");
				dir = dir.split("/").join("");

				return {body: dir}

		files: [
			expand: true
			cwd: 'src/jade/'
			src: [
				'**/*.jade'
				'!parts/*.jade'
			]
			dest: 'public/'
			ext: '.html'
		]

【SVG実践】SVG画像を使ってみる

SVG

こんにちは iijmyaです。

今回は先日お話ししましたSVGの実践編として、
SVGで画像を作成して実際にHTMLページに載せてみたいと思います。

=============================== 目 次 ===============================

1.SVGファイルの作成
2.HTMLのページにSVGファイルを載せる
3.SVGライフを充実させるために

====================================================================


前回お話ししたように、SVGファイルはAdobeIllustratorオープンソースソフトのInkscapeなどの
画像編集ソフトを利用することによって作成することが出来ます。

今回はIllustratorを使ってSVGファイルを作成し、HTMLのページに載せてみます。

1.SVGファイルの作成

アイコンを描く

まずはIllustratorでアイコンを描きましょう。
(今回はIllustrator CCを使用しています)

f:id:seattleservice:20140130115351p:plain


SVG形式で書き出す

作成したアイコンを、SVGファイルとして書き出します。
[ファイル > 保存]を開き、[ファイル形式]の部分で「SVG(svg)」または「SVG 圧縮(svgz)」を選択し、[保存]をクリックします。
今回は「SVG(svg)」形式で保存しました。

f:id:seattleservice:20140130120945p:plain


[保存]をクリックするとSVGオプションダイアログが表示され、色々設定をいじることが出来ますが、
今回はそのまま[OK]をクリックします。

f:id:seattleservice:20140130121025p:plain

これでSVGファイルは作成され保存出来たので、あとは実際にHTMLに載せてあげます。


2.HTMLのページにSVGファイルを載せる

今回は、前回紹介した方法の一つである、objectタグを用いてSVG画像を読み込みたいと思います。
比較用にPNG画像のアイコンも載せておきます。

HTMLの記述
<body>
  <header>
    <!-- 省略 -->
  </header>

  <div class="main">
    <div class="left_pane top">
      <object type="image/svg+xml" data="icon.svgz"></object>
    </div>
    <div class="right_pane top">
      <!-- 省略 -->
    </div>

    <div class="left_pane bottom">
      <!-- 省略 -->
    </div>
    <div class="right_pane bottom">
      <img src="icon.svgz">
    </div>
  </div>

  <footer>
    <!-- 省略 -->
  </footer>
</body>


ブラウザで表示を確認してみる

ブラウザ(今回はGoogle Chrome)で確認してみると、以下のように表示されました。

f:id:seattleservice:20140130132915p:plain

左上のアイコンがSVG画像で、右下のアイコンがPNG画像です。

このページの表示を300%にしてみると以下のようになりました。
f:id:seattleservice:20140130135123p:plainf:id:seattleservice:20140130135117p:plain

SVG画像の方はくっきり鮮明なままですが、PNG画像の方はぼやけてしまっていますね。

これをiOSシミュレーターを使ってRetina環境を再現して確認したところ、
シンプルなアイコンにしたためあまり大きな差はありませんでしたが、
それでもやはりPNG画像の方は若干がたついていました。

3.SVGライフを充実させるために

SVG画像は何も考え無しに作ってしまったり、複雑な構成や多色の図を作ろうとすると、
PNG画像やJPG画像などのラスタ画像と比べてファイル容量が大きくなってしまう場合があります。

例えば、今回作成したアイコンだとSVGファイルの方が半分も軽いですが、
f:id:seattleservice:20140130181436p:plain

以下の画像を見てみると、SVGファイルの方が倍以上容量が大きくなっています。
f:id:seattleservice:20140131145058p:plain

そのため、SVG画像の軽量化が必要になる場合が出て来ると思いますが、以下のような方法があります。


1) SVGZ形式で保存する

SVGZは、先ほどIllustratorでアイコンを作成し、保存するときに出てきましたね。
SVGZはSVGを圧縮したファイル形式になるため、軽量化が期待出来ます。

例えば、先ほど例に出したSVG画像をSVGZ形式で保存してみると、かなり軽量化することが出来ました。
f:id:seattleservice:20140131154157p:plain


2) 軽量化ツールの使用

軽量化ツールのひとつに「SVGO」があります。
SVGOはターミナル上で以下のコマンドを打つだけでインストール可能です。

sudo npm install -g svgo


使い方は簡単で、軽量化したい対象SVGファイルのあるディレクトリまで移動し、以下のようなコマンドを打つだけです。

svgo ファイル名

例えば今回作成したtest.svgに対して軽量化を行ったところ、以下のようになりました。

$svgo test.svg

Done in 171 ms!
169.186 KiB - 16.5% = 141.276 KiB


SVGファイルをSVGZファイルに変換することも出来るようなので試してみたところ、

$svgo test.svg -o - | gzip -cfq9 > test2.svgz
$du -a -h

12K	./test2.svgz

先ほど1) でIllustratorで保存したSVGZファイルより、5KB軽い結果になりました。

他にも指定ディレクトリ内にある全てのSVGファイルの軽量化や、
SVGZファイルからSVGファイルへの変換など、色々なことが出来るようなので、
詳しくは以下のリンク先で確認してみてください。

SVGO - GitHub



今後どんどんSVGに対応するブラウザやサイトが増えていくと良いですね。

【SVG入門】SVGでベクターグラフィックス【その2】

SVG

こんにちは iijmyaです。

今回も引き続きSVGについてです。

前回、SVGが扱うベクターグラフィックスやビットマップグラフィックスについてお話ししましたが、
(【SVG入門】SVGでベクターグラフィックス【その1】 - シアトルコンサルティング サービス開発ブログ)
今回は実際にSVGを使ってみます。


=============================== 目 次 ===============================

1.ベクターグラフィックスとビットマップグラフィックス(前回)
2.SVGの使用シーン(前回)
3.SVGを使ってみる

====================================================================

3.SVGを使ってみる

SVGは、既にFirefox,Safari,Chromeなどのブラウザがサポートしており、
IEに関してもフィルタやアニメーション,フォント以外ではあるものの、IE9以上がサポートをしています。

SVGをブラウザで表示する場合、外部SVGファイルを読み込む方法と、直接SVGをHTMLに埋め込む方法があります。

(1) 外部SVGファイルを読み込む方法

SVGファイルはAdobeIllustratorMicrosoftのOffice VisioオープンソースソフトのInkscapeなどの画像編集ソフトを利用することによって出力することが出来ます。
ブラウザ上でペイントのように描画してSVGを出力できる「SVG-edit」というのもありました。

objectタグを使用する

HTML内にobjectタグを挿入し、type属性に"image/svg+xml"を、data属性に表示したいSVGファイルのURLを指定します。
この方法はSVGをサポートしているブラウザとの互換性も良く、JavaScriptによる制御も可能です。

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


imgタグを使用する

通常の画像と同じくimgタグのsrc属性でSVGファイルを指定することで表示することが出来ます。
ただし、この方法だと最新ブラウザのみでしか動作せず、かつ、JavaScriptによる制御が出来ないデメリットもあります。

<img src="sample.svg">


(2) 直接SVGをHTMLに埋め込む方法
svgタグを使用する

HTML5をサポートした最新ブラウザであれば、直接HTMLにSVGを埋め込むことが出来ます。

<svg>
  <!-- 円 -->
  <circle cx="100" cy="100" r="50" fill="#f65" />
  <!-- 四角 -->
  <rect x="120" y="120" width="100" height="100" fill="#56f" />
</svg>

上記コードのように、svgタグの中にcircleタグやrectタグを指定することで、図形を描画することが出来ます。
f:id:seattleservice:20140117121116p:plain

(3) 応用: JavaScriptを使用してSVGを制御する

これは応用になりますが、SVGに対してJavaScriptを用いて制御を行うことも出来ます。
以下は、図をクリックすると色が変わるサンプルです。

<svg>
  <circle id="circle" cx="100" cy="100" r="50" fill="#f65" />
</svg>

<!-- jQuery使用 -->
<script type="text/javascript">
  !function() {
    $("#circle").on("click", function() {
      $(this).attr("fill", "#56f");
    });
  }();
</script>

f:id:seattleservice:20140117155818p:plain



いかがでしたでしょうか。
今回は実際にブラウザでSVGを表示する方法について紹介しました。