feat(snippets): save screenshot as svg (#318)

Author: antonreshetov

src/renderer/components/screenshot/TheScreenshot.vue

@@ -26,8 +26,16 @@
       <div class="right">
         <AppActionButton
           v-tooltip="i18n.t('saveScreenshot')"
-          @click="onSaveScreenshot"
+          @click="onSaveScreenshot('png')"
         >
+          PNG &nbsp;
+          <UniconsFileDownload />
+        </AppActionButton>
+        <AppActionButton
+          v-tooltip="i18n.t('saveScreenshot')"
+          @click="onSaveScreenshot('svg')"
+        >
+          SVG &nbsp;
           <UniconsFileDownload />
         </AppActionButton>
       </div>
@@ -174,12 +182,20 @@ const init = () => {
   hljs.registerAliases('graphqlschema', { languageName: 'graphql' })
 }
 
-const onSaveScreenshot = async () => {
-  const data = await domToImage.toPng(snippetRef.value!)
+const onSaveScreenshot = async (type: 'png' | 'svg' = 'png') => {
+  let data = ''
+
+  if (type === 'png') {
+    data = await domToImage.toPng(snippetRef.value!)
+  }
+
+  if (type === 'svg') {
+    data = await domToImage.toSvg(snippetRef.value!)
+  }
 
   const a = document.createElement('a')
   a.href = data
-  a.download = `${props.name}.png`
+  a.download = `${props.name}.${type}`
   a.click()
 
   track('snippets/create-screenshot')
@@ -274,6 +290,10 @@ init()
       align-items: center;
       display: flex;
     }
+    .right {
+      display: flex;
+      gap: var(--spacing-xs);
+    }
   }
   .content {
     flex: 1;

src/renderer/components/ui/AppActionButton.vue

@@ -15,6 +15,7 @@
   border: none;
   background-color: transparent;
   outline: none;
+  color: var(--color-text);
   :deep(svg) {
     fill: var(--color-button-action);
   }