viewBoxについてviewBoxについてもっと詳しくいうと、viewBoxはSVGの内容を表示させる「表示領域」と図形の配置や大きさの基準となる「座標系」を定義します。記述します(単位は指定しません)。200px」の大きさを示しているわけではありません。この絶対単位に対して「座標系」における単位を利用単位といいます。svg内のそれぞれの図形は、この利用単位で配置やサイズを指定するので、通常は絶対単位での指定はしません。viewPortとviewBoxの関係viewPortの大きさはwidth、height属性で絶対単位での指定で決まります(別途CSSで指定・上書きが可能)。SVGの座標系は特定の絶対単位を持たないため、1利用単位のサイズは、viewPortの大きさによって異なります。下記が実際のデモです。codepen.io円の大きさだけでなく、線の太さも変わっているのが確認できます。このように座標系の利用単位が変化することを「座標系変換」といいます。SVGにおける1座標(利用単位)は、width、heightをviewBoxで定義したX軸、Y軸のそれぞれの値で割ったサイズということになります。して扱う方が余計な混乱をきたさないかと思います。関係は深いので、詳しくは別途まとめようと思っています。中心座標と半径を指定して円を描画します。専用属性とはこの要素特有の属性のことを指す模様です。グラフィカルイベント属性と呼ばれる属性などを指定できます。リファレンスを参照ください。矩形を描画する際の基準となる座標と、そこからの幅と高さを指定します。角丸四角形も作成できます。要素2点の座標を繋いた直線を描画します。表示結果その他にもたくさんの要素がありますが、それはまた別途調べたいと思います。実際にWebコンテンツとしてHTMLに埋め込む方法は下記になります。img要素として埋め込むSVGは画像でもあるので、img要素として簡単に埋め込むことができます。要素に対して背景色グレーを指定します。SVG自体は円以外は透過です。img要素にwidth、heightを指定して縮小しても拡大しても基本的に画像が荒れることはありません。背景画像として埋め込むCSSで背景画像として使うこともできます。要素(インラインSVG)として埋め込むタグとしてhtmlに埋め込んだ場合、xmlns属性を省略することが可能です。svgタグにはwidthとheightを指定します。インラインSVGの場合、htmlと同じくDOMツリーが作成されます。確認すると下記のようになります。要素の色が変わる操作をしてみます。外部メディアとして埋め込むあまり使う機会はないかと思いますが、object要素、embed要素を使って外部メディアとして埋め込むことが可能です。分かりやすいように、object要素とembed要素の背景色に薄いグレーをつけています。表示結果ネームスペースがない場合ちなみにこの時、svgにネームスペースを記述しないと描画されません。下記のように、object要素、embed要素にwidth、heightのサイズ指定がある場合、そちらが優先されます。なっているのが分かります。今まで使ったことがないので簡単なカウンターアプリを作って、実際に使ってみて一体何がいいのかを確認してみました。翻訳の力を借りて目を通したので、残しておきます。JavaScriptReact-reduxの公式ドキュメントを久しぶりに見てみると、いろいろと更新されていたので、ちゃんと読みこむことをしています。翻訳の力で訳したので、自分用にメモ。APIを理解するReact.jsここしばらくフロントの勉強が疎かになっており、会社での立場に危機感(?)を感じたので、現実から逃げずにちゃんと勉強していくことにしました。ついて理解したいと思います。特集「設計も、実装も、ここから始まる!名前付け大全」を読んだメモです。Performancewebpack下記ページのざっくりとした翻訳。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。