Core Concepts

SVG as a File

• SVG as a File

SVG as Code

• SVG as Code inline with HTML

• Fork this pen, manually clean up SVG code, and CSS hooks

  • https://codepen.io/manikoth/pen/NMyewZ?editors=1000

• Drawing with SVG Elements are possible, but GUI tools are preferred and more efficient

  • Reference other SVG Elements

• Style SVG code from CSS

• Control behavior with JS

viewBox

• fork this Pen and change the values of theviewboxattribute

  • https://codepen.io/manikoth/pen/NMyewZ?editors=1000

• viewBox is determines what parts of SVG are visible

• Like the artboard on vector graphic tools

• Reference: Understand the viewBox