# v-svg

<v-svg> is a thin wrapper component on top of the <svg> element, providing quality-of-life enhancements for SVG: mobile support, content padding, content centering, and download functionality.

# Mobile support

When viewing the SVG on mobile devices <v-svg> adjusts its contents to the page width.

# Padding

SVG default coordinate system starts at the top-left corner at the 0 0 position. While geometrically correct, it might lead to visual artifacts when SVG elements get close to the edge of the SVG elements: borders, grids, etc.

<svg width="200" height="200" class="shadow">
  <circle v-for="g in rectgrid(11,11,20)" :cx="g.x" :cy="g.y" r="1" />
  <rect width="100" height="100" fill="none" stroke="black" />
</svg>

Note the uneven widths of rectangle borders and sizes of grid dots:

<v-svg> provides a padding attribute (also know as bleed in the prepress community) to avoid visual artifacts near the edges.

Here is <v-svg> with padding of 10:

<v-svg width="200" height="200" padding="10" class="shadow">
  <circle v-for="g in rectgrid(11,11,20)" :cx="g.x" :cy="g.y" r="1" />
  <rect width="100" height="100" fill="none" stroke="black" />
</v-svg>

# Centered

In many circumstances it is handy to set the SVG coordinate system to the center of the SVG, especially when working on radial symmetry. While it is possible to adjust viewBox attribute values manually, its easier to use centered attribute on <v-svg>:

<v-svg centered width="200" height="200">
  <circle r="100" fill="red" opacity="0.2" />
  <circle v-for="g in polargrid(v.count ?? 6,50)" :cx="g.x" :cy="g.y" r="50" fill="red" opacity="0.2"/>
</v-svg>

> v.count: {{ v.count ?? 6 }}

<v-slider v-model="v.count" :value="6" max="32" />

v.count: 6

# Download

<v-svg> can react to the "download" global event that allows downloading the SVG contents as a file.

As there might be many SVGs on a page, you need to identify the SVG with the id attribute and pass it to the emitted event. The id parameter is also the filename of the downloaded SVG file.

<v-svg id="test" width="200" height="200" padding="10" centered>
  <circle v-for="g in rectgrid(11,11,20)" :cx="g.x - 100" :cy="g.y - 100" r="1" />
  <circle r="100" fill="red" opacity="0.2" />
  <circle v-for="g in polargrid(v.count ?? 6,50)" :cx="g.x" :cy="g.y" r="50" fill="red" opacity="0.2"/>
</v-svg>

<button v-on:click="emit('download', 'test')">Download test.svg</button>

Download test.svg

# Prior art

Fachwerk f-scene

Fachwerk f-artboard

Visualia v-scene