Vue Snap is a JavaScript library for drawing complex svg graphics using Vue.

Related tags

SVG vue-snap-svg
Overview

Vue Snap Version License Discord

VueSnap Logo

Vue Snap is a JavaScript library for drawing complex svg graphics using Vue.

It provides declarative and reactive bindings to the Snap Framework.

All vue-snap-svg components correspond to Snap components of the same name with the prefix 'v-'. All the parameters available for Snap objects can add as config in the prop for corresponding vue-snap-svg components.

Core shapes are: v-rect, v-circle, v-ellipse, v-line, v-image, v-text, v-path, v-polyline, v-svg. Also you can create custom shape.

To get more info about Snap you can read Snap Overview.

Quick Start

Vue.js version 2.4+ is required.

1 Install via npm

npm i vue-snap-svg

2 Import and use VueSnapSVG

import Vue from "vue";
import VueSnapSVG from "vue-snap-svg";
Vue.use(VueSnapSVG);

3 Reference in your component templates

">
<template>
  <v-stage :config="configSnap">
    <v-circle :config="configCircle">v-circle>
  v-stage>
template>
">
<script>
export default {
  data() {
    return {
      configSnap: {
        width: 200,
        height: 200
      },
      configCircle: {
        cx: 100,
        cy: 50,
        r: 40,
        fill: "red",
        stroke: "black",
        strokeWidth: 4
      }
    };
  }
};
</script>

Core API

Getting reference to Snap objects

You can use ref feature from vue.

">
<template>
  <v-stage ref="stage" :config="configSnap">
    <v-circle ref="circle" :config="configCircle">v-circle>
  v-stage>
template>

<script>
  export default {
    data() {
      return {
        configSnap: {
          width: 200,
          height: 200,
        },
        configCircle: {
          cx: 100,
          cy: 50,
          r: 40,
          fill: "red",
          stroke: "black",
          strokeWidth: 4,
        },
      };
    },
    mounted() {
      const stage = this.$refs.stage.getNode();
      const circle = this.$refs.circle.getNode();
    },
  };
script>

Configurable prefix

By default vue-snap-svg is using v- prefix for all components.

You can use your own prefix if default one conflicts with some other libs or your components.

">
import Vue from 'vue';
import VueSnapSVG from 'vue-snap-svg'
Vue.use(VueSnapSVG, { prefix: 'Snap'});
// in template:
<snap-stage ref="stage" :config="stage">

Change log

The change log can be found on the Releases page.

You might also like...
A Vue component for importing inline SVG icons from different popular icon packs easily.

A Vue component for importing inline SVG icons from different popular icon packs easily.

An opinionated example of how to use SVG icons in a Vue.js application
An opinionated example of how to use SVG icons in a Vue.js application

An opinionated example of how to use SVG icons in a Vue.js application

A editable SVG-based diagram component for Vue
A editable SVG-based diagram component for Vue

A editable SVG-based diagram component for Vue

Utility to convert SVG code into Vue component definition

Utility to convert SVG code into Vue component definition

A Laravel Mix extension to inline SVG files with Vue.js and automatically optimize them with SVGO
A Laravel Mix extension to inline SVG files with Vue.js and automatically optimize them with SVGO

Laravel Mix SVG Vue Extension to inline SVG files with Vue.js and optimize them automatically with SVGO. Installation # npm npm install laravel-mix-sv

Convert SVG to React/Vue components

Convert SVG to React/Vue components

SVG icon components and tool set

Svg Icon Packages Features Support multiple js frameworks Load with webpack loader Supports multiple colors, including gradients; Supports set fill an

Vite Plugin for fast creating SVG sprites.

Vite Plugin for fast creating SVG sprites.

Svg icons for VueJS.

Svg icons for VueJS.

Owner
null
Lightweight Vue components for drawing pure svg charts without external dependencies.

Lightweight Vue components for drawing pure svg charts without external dependencies.

Antoine GIRARD 5 Jan 3, 2021
Vue.js component drawing SVG Funnel Graphs

Vue.js component drawing SVG Funnel Graphs

Greg Hovanesyan 198 Jul 25, 2022
Taiwan SVG chart Vue components 台灣行政區 SVG 圖表 Vue 組件

Taiwan SVG chart Vue components 台灣行政區 SVG 圖表 Vue 組件

Waiting 11 Sep 2, 2022
Dynamically loads an SVG source and inline svg element so you can manipulate the style of it

Vue Inline SVG Vue component loads an SVG source dynamically and inline <svg> so you can manipulate the style of it with CSS or JS. It looks like basi

null 141 Sep 17, 2022
A SVG sketch board Library

A SVG sketch board Library

tyounami 1 Jun 22, 2020
🎨 Vue component for customize your svg file. (For Vue CLI 2)

Vue SVG Filler ?? ?? Vue component for customize your svg file. Demo Page Documentation & Demo Page Install npm install vue-svg-filler --save or yarn

Pongsatorn 84 May 27, 2022
Vue component to easily build (or use presets) SVG loading cards Facebook like.

Vue Content Loading Vue component to easily build or use presets for Facebook-like SVG loading cards. Inspired in React Content Loader So how does it

Lucas Leandro 758 Sep 19, 2022
Vue.js directive to simply use SVG sprite

vue-svg-sprite Vue.js component or directive to simply use SVG sprites ?? This new version (2.x) is for Vue.js 3. For v2 compatibility, check previous

Thierry Michel 60 May 27, 2022
Vue bare components to create svg interactive graphs, diagrams or node visual tools.

Vue bare components to create svg interactive graphs, diagrams or node visual tools.

null 67 Sep 24, 2022
An interactive SVG based network-graph visualization component for Vue 3.

An interactive network graph visualization component for Vue 3

dash14 199 Sep 28, 2022