diff --git a/README.md b/README.md
index 807a1f5..ece7e3b 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,9 @@ and use in your component,
   :width="'400px'"
   :height="'400px'"
   :id="'custom-id'"
+  tag="'div'"
+  wrapperClasses="'simple-svg-wrapper'"
+  svgClasses="'simple-svg'"
   @ready="onSvgReady()"
   />
 ```
@@ -40,6 +43,9 @@ and use in your component,
 | width | string | svg's width | '1em' |
 | height | string | svg's height | '1em' |
 | id | string | custom color | '' |
+| wrapperClasses | string, array | custom classes for wrapper | 'simple-svg-wrapper' |
+| svgClasses | string, array | custom classes for svg element | 'simple-svg' |
+| tag | string | custom tag to use on the wrapper | 'div' |
 
 | events | description |
 | ------ | ------ |
diff --git a/demo/components/SvgButton.vue b/demo/components/SvgButton.vue
index 8e282a3..4e4c238 100644
--- a/demo/components/SvgButton.vue
+++ b/demo/components/SvgButton.vue
@@ -11,6 +11,9 @@
         :width="svgWidth"
         :height="svgHeight"
         :id="svgId"
+        :wrapperClasses="'simple-svg-wrapper'"
+        :svgClasses="'simple-svg-wrapper'"
+        tag="div"
         @ready="svgReady()"
         />
       <p class="button-label" :style="{'color': getLabelColor}"> {{ buttonLabel }} </p>
diff --git a/package-lock.json b/package-lock.json
index 47106ad..ea246d1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3802,12 +3802,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -3822,17 +3824,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -3949,7 +3954,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -3961,6 +3967,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -3975,6 +3982,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4093,7 +4101,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4226,6 +4235,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
diff --git a/src/plugin.js b/src/plugin.js
index a89eefb..0c671eb 100644
--- a/src/plugin.js
+++ b/src/plugin.js
@@ -1,11 +1,10 @@
 const CSSOM = require('cssom')
-const myClassName = 'simple-svg'
 
 let SimpleSVG = {
   render (createElement) {
-    return createElement('div', {
+    return createElement(this.tag, {
       'class': [
-        'simple-svg-wrapper'
+        Array.isArray(this.wrapperClasses) ? this.wrapperClasses.join(' ') : this.wrapperClasses
       ]
     })
   },
@@ -18,7 +17,19 @@ let SimpleSVG = {
     height: String,
     id: {
       type: String,
-      defualt: ''
+      default: ''
+    },
+    tag: {
+      type: String,
+      default: 'div'
+    },
+    wrapperClasses: {
+      type: [String, Array],
+      default: 'simple-svg-wrapper'
+    },
+    svgClasses: {
+      type: [String, Array],
+      default: 'simple-svg'
     }
   },
   data () {
@@ -46,6 +57,18 @@ let SimpleSVG = {
     },
     height (val) {
       this.updateSVGStyle('height', val)
+    },
+    svgClasses (val) {
+      const svgElement = this.$el.getElementsByTagName('svg')[0]
+      this.updateClasses(svgElement, val)
+    },
+    wrapperClasses (val) {
+      const wrapperElement = this.$el
+      this.updateClasses(wrapperElement, val)
+    },
+    tag () {
+      // re-generate inline svg
+      this.generateInlineSVG()
     }
   },
   methods: {
@@ -169,7 +192,7 @@ let SimpleSVG = {
           inlinedSVG.style.height = context.height
           inlinedSVG.style.fill = context.fill
           inlinedSVG.style.stroke = context.stroke
-          inlinedSVG.classList.add(myClassName) // add an additional class
+          inlinedSVG.classList.add(Array.isArray(context.svgClasses) ? context.svgClasses.join(' ') : context.svgClasses) // add an additional class
 
           context.$el.appendChild(inlinedSVG)
 
@@ -195,7 +218,13 @@ let SimpleSVG = {
       } else {
         console.error('No svg element found. Did you pass a valid .svg file?')
       }
-    }
+    },
+    updateClasses (element, classes) {
+      element.classList = []
+      if (element) {
+        element.classList.add(classes)
+      }
+    },
   }
 }