Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SVG Sandbox</title>
body {
background: #EEE;
svg {
background: #FFF;
line {
stroke: #333;
stroke-width: 3;
path {
stroke: #333;
stroke-width: 3;
fill: none;
rect {
fill: #CCC;
stroke: #333;
circle {
fill: #CCC;
stroke: #333;
<div id="app">
<svg viewbox="0 0 500 400" width="500" height="400">
<rect x=100 y=100 width=20 height=20></rect>
<circle cx=200 cy=100 r=20></circle>
<text x=300 y=100>test</text>
<line x1=100 y1=200 x2=120 y2=220></line>
<path d="M 200,200 C 240,200 210,250 250,250"></path>
<script src=""></script>
new Vue({
el: "#app",
data: {
mounted() {
methods: {
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.