まずベースとなるサンプルを用意しておきます 200*200のサイズで、背景をグレイにして真ん中にオレンジの円をおきます。芸術的です。 左上に青い円も添えます。 <svg width="200" height="200" viewBox="0 0 200 200" style="background: #ddd"> <circle cx="100" cy="100" r="50" fill="orange" /> <circle cx="0" cy="0" r="10" fill="blue" /> </svg> 基本的なこと まず外側の<svg width="200" height="200"の部分の200*200がビューポート(描画エリア)のサイズです。 viewBox="0 0 200 200"が考察したいviewBoxですが、これの意味するところは。 「vievBox="x y wi