svg-2-code/index.html at main · nikitahl/svg-2-code · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>SVG to Code | Online converter</title>
  <meta name="description" content="Online tool to convert SVG image to code and vice versa">

  <meta property="og:title" content="SVG to Code | Online converter" />
  <meta property="og:description" content="Online tool to convert SVG image to code and vice versa" />
  <meta property="og:url" content="https://nikitahl.github.io/svg-2-code/" />
  <meta property="og:image" content="./img/svg-to-code.png" />
  <meta property="og:site_name" content="SVG to Code" />
  <meta property="og:locale" content="en_US" />
  <meta property="og:type" content="article" />

  <meta name="twitter:card" content="summary_large_image"/>
  <meta name="twitter:title" content="SVG to Code | Online converter"/>
  <meta name="twitter:description" content="Online tool to convert SVG image to code and vice versa"/>
  <meta name="twitter:site" content="@nikitahl"/>
  <meta name="twitter:image" content="./img/svg-to-code.png"/>
  <meta name="twitter:creator" content="@nikitahl"/>

  <link rel="icon" type="image/svg+xml" href="./img/favicon.svg" sizes="any">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="./style.css">
  <link rel="stylesheet" href="./codemirror/lib/codemirror.css">
  <link rel="stylesheet" href="./codemirror/theme/material-darker.css">
</head>
<body>
  <main>
    <h1 class="title">
      SVG
      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrows-right-left" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <line x1="21" y1="7" x2="3" y2="7"></line>
        <path d="M18 10l3 -3l-3 -3"></path>
        <path d="M6 20l-3 -3l3 -3"></path>
        <line x1="3" y1="17" x2="21" y2="17"></line>
      </svg>
      Code
    </h1>
    <p class="subtitle">Convert SVG image to code and vice versa. 🪄</p>
    <p class="subtitle small">To start, upload an SVG image or paste SVG code below</p>

    <div class="input-container">
      <div class="input-item upload-container">
        <input type="file" id="upload" accept="image/svg+xml">
      </div>
      <div class="input-item code-container">
        <textarea id="result" rows="10" cols="50"></textarea>
      </div>
    </div>

    <div class="controls">
      <a class="control control-download" href="" id="download">Download SVG image</a>
      <button class="control control-copy" id="copy">Copy code to clipboard</button>
    </div>

    <div class="preview-title-container">
      <h2>SVG preview</h2>
      <input type="color" id="preview-bg" class="colorpicker" title="Preview background" value="#e3e3e3">
    </div>
    <div class="preview"></div>

    <h2>About</h2>
    <p class="about">An online tool to convert SVG images to HTML code fast and easy. Make conversions also vice versa.</p>
    <p class="about">Drag and drop SVG image to instantly see the output HTML code. Or paste/edit the HTML code and see the actual image in the Preview box. Copy output code to Clipboard or download SVG image to your computer.</p>

    <h2>How to convert SVG image to code</h2>
    <p class="about">SVG image is in fact a code itself. You can easily convert code to images and vice versa simply by opening SVG images in any text editor. Or alternatively, you can paste SVG code to the text editor and save the file with the .svg extension.</p>

  </main>

  <footer>
    <p class="footer-text">Made by <a href="https://twitter.com/nikita_hlopov">@nikitahl</a> | View on <a href="https://github.com/nikitahl/svg-2-code">GitHub</a></p>
  </footer>

  <script src="./index.js"></script>
</body>
</html>