@zhangqingcq/vgce 0.1.35 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhangqingcq/vgce",
-  "version": "0.1.35",
+  "version": "0.2.0",
   "description": "Vector graphics configure editor. svg组态编辑器。基于vue3.3+ts+element-plus+vite",
   "publishConfig": {
     "access": "public"

package/src/assets/icons/svg-file.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1793173027617" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3032" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M219.424 18.304h530.272l201.152 219.424v768H219.424V18.304z" fill="none" p-id="3033"></path><path d="M733.696 253.728V50.304H251.424v923.424h667.424v-720h-185.152z m217.152-16v768H219.424V18.304h530.272l201.152 219.424z m-58.08-16l-127.04-138.624v138.624h127.04z" class="icon-out" p-id="3034" data-spm-anchor-id="a313x.search_index.0.i4.44c03a81Y6jSmC"></path><path d="M73.152 288a32 32 0 0 1 32-32h448a32 32 0 0 1 32 32v448a32 32 0 0 1-32 32h-448a32 32 0 0 1-32-32V288zM640 416h224v37.344h-224V416zM640 509.344h224v37.312h-224v-37.312zM640 602.656h224V640h-224v-37.344z" class="icon-in" p-id="3035" data-spm-anchor-id="a313x.search_index.0.i6.44c03a81Y6jSmC"></path><path d="M224 574.112l54.016-5.248c3.232 18.144 9.792 31.456 19.68 39.936 9.984 8.512 23.424 12.768 40.32 12.768 17.856 0 31.296-3.744 40.32-11.264 9.088-7.616 13.664-16.48 13.664-26.624a24.416 24.416 0 0 0-5.824-16.48c-3.744-4.64-10.368-8.64-19.84-12-6.528-2.24-21.344-6.272-44.48-12-29.76-7.36-50.592-16.448-62.592-27.2-16.896-15.136-25.312-33.568-25.312-55.328 0-13.984 3.936-27.04 11.808-39.168 8-12.256 19.424-21.568 34.304-27.936 15.008-6.4 33.056-9.568 54.176-9.568 34.496 0 60.448 7.552 77.824 22.688 17.504 15.136 26.688 35.328 27.552 60.576l-55.488 2.432c-2.368-14.144-7.488-24.256-15.36-30.4-7.776-6.24-19.456-9.376-35.072-9.376-16.128 0-28.768 3.328-37.888 9.952a20.032 20.032 0 0 0-8.8 17.056 21.12 21.12 0 0 0 8.256 16.704c6.976 5.856 24 12 50.976 18.368 27.008 6.4 46.944 12.992 59.84 19.872 12.992 6.752 23.104 16.064 30.368 27.936 7.36 11.744 11.04 26.304 11.04 43.68 0 15.776-4.352 30.496-13.12 44.256-8.736 13.76-21.12 24-37.12 30.752-16 6.624-35.936 9.92-59.84 9.92-34.72 0-61.408-8-80.032-24-18.624-16.096-29.76-39.552-33.376-70.304z" fill="#FFFFFF" p-id="3036"></path></svg>

package/src/components/svg-editor/center-panel.vue

@@ -38,6 +38,7 @@
 	import type { IVisibleInfo } from '../config'
 	import { useContextMenuStore, useEditPrivateStore } from '@/stores/system'
 	import { EContextMenuInfoType } from '@/stores/system/types'
+	import { exportCanvasSvg } from '@/utils/export-svg'
 
 	const globalStore = useGlobalStore(pinia)
 	const configStore = useConfigStore(pinia)
@@ -50,6 +51,7 @@
 	componentsRegister(props.vueComp)
 	const contextMenuRef = ref<HTMLElement>()
 	const canvasRef = ref<HTMLElement>()
+	const svgRef = ref<SVGSVGElement>()
 	const ct: Record<string, any> = {
 		MoveCanvas: 'grab',
 		Rotate: "url('/src/assets/icons/rotate.svg'), auto",
@@ -1002,7 +1004,18 @@
 		})
 	})
 
-	defineExpose({ onCanvasMouseUp })
+	const exportSvg = (filename?: string) => {
+		if (!svgRef.value) {
+			return false
+		}
+		exportCanvasSvg(svgRef.value, {
+			filename,
+			background: configStore.svg.background_color
+		})
+		return true
+	}
+
+	defineExpose({ onCanvasMouseUp, exportSvg })
 </script>
 
 <template>
@@ -1024,17 +1037,26 @@
 	>
 		<slot name="background" />
 		<div class="coverLayer">
-			<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
+			<svg ref="svgRef" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
 				<defs>
-					<pattern id="pattern_grid" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+					<pattern
+						id="pattern_grid"
+						data-editor-only
+						patternUnits="userSpaceOnUse"
+						x="0"
+						y="0"
+						width="20"
+						height="20"
+					>
 						<line x1="0" y1="0" x2="0" y2="20" :stroke="configStore.svg.grid_color" />
 						<line x1="10" y1="0" x2="10" y2="20" :stroke="configStore.svg.grid_color" />
 						<line x1="0" y1="0" x2="20" y2="0" :stroke="configStore.svg.grid_color" />
 						<line x1="0" y1="10" x2="20" y2="10" :stroke="configStore.svg.grid_color" />
 					</pattern>
 				</defs>
-				<rect v-if="configStore.svg.grid" width="100%" height="100%" fill="url(#pattern_grid)" />
+				<rect v-if="configStore.svg.grid" data-editor-only width="100%" height="100%" fill="url(#pattern_grid)" />
 				<g
+					data-canvas-content
 					:transform="`translate(${svgEditLayoutStore.center_offset.x * configStore.svg.scale},${
 						svgEditLayoutStore.center_offset.y * configStore.svg.scale
 					})rotate(${0})scale(${configStore.svg.scale})`"
@@ -1126,6 +1148,7 @@
 								/>
 								<rect
 									v-if="item.config.actual_rect"
+									data-editor-only
 									:id="`rect${item.id}`"
 									fill="black"
 									fill-opacity="0"
@@ -1152,10 +1175,12 @@
 										visible_info.handle_panel &&
 										item.type !== EDoneJsonType.ConnectionLine
 									"
+									data-editor-only
 									:item-info="item"
 								/>
 								<connection-panel
 									@contextmenu="onCanvasContextMenuEvent"
+									data-editor-only
 									v-if="
 										!item.selected &&
 										visible_info.select_item.info?.id == item.id &&
@@ -1173,6 +1198,7 @@
 					</g>
 					<!--框选-->
 					<rect
+						data-editor-only
 						:x="selectRect.x"
 						:y="selectRect.y"
 						:height="selectRect.height"
@@ -1294,4 +1320,4 @@
 	.common-ani {
 		transform-box: fill-box;
 	}
-</style>
+</style>

package/src/components/svg-editor/connection-line.vue

@@ -43,6 +43,7 @@
 	<g :style="{ cursor: globalStore.intention === EGlobalStoreIntention.Connection ? 'crosshair' : 'move' }">
 		<!-- 选中效果 -->
 		<path
+			data-editor-only
 			:d="positionArrToPath(props.itemInfo.props.point_position.val)"
 			fill="none"
 			fill-opacity="0"
@@ -54,6 +55,7 @@
 		/>
 		<!-- 打底 -->
 		<path
+			data-editor-only
 			:d="positionArrToPath(props.itemInfo.props.point_position.val)"
 			fill="none"
 			fill-opacity="0"
@@ -133,7 +135,7 @@
 			>
 			</animateMotion>
 		</circle>
-		<g>
+		<g data-editor-only>
 			<!-- 节点选中效果 -->
 			<circle
 				v-for="(item, index) in props.itemInfo.props.point_position.val"
@@ -162,4 +164,4 @@
 			/>
 		</g>
 	</g>
-</template>
+</template>

package/src/components/svg-editor/index.vue

@@ -142,6 +142,30 @@
 		centerRef.value.onCanvasMouseUp()
 	}
 
+	function onExportSvg() {
+		ElMessageBox.prompt(
+			'请输入文件名',
+			'保存为SVG文件',
+			{
+				cancelButtonText: '取消',
+				confirmButtonText: '保存',
+				inputValue: 'svg-canvas',
+				inputPattern: /^[^\\/:*?"<>|]+$/,
+				inputErrorMessage: '文件名不能包含 \\ / : * ? " < > |'
+			},
+			appContext
+		)
+			.then((r: any) => {
+				const success = centerRef.value?.exportSvg(r.value.trim())
+				if (success) {
+					ElMessage.success('SVG文件已保存')
+				}
+			})
+			.catch((e: any) => {
+				console.log(e)
+			})
+	}
+
 	onMounted(() => {
 		configStore.net.mqtt.useGlobalMqtt = Boolean(props.mqtt?.cover)
 		if (!configStore.net.mqtt.global) {
@@ -171,6 +195,7 @@
 					@on-return="onReturnClick"
 					@on-preview="(val: IDataModel) => emits('onPreview', val)"
 					@on-save="save"
+					@on-export-svg="onExportSvg"
 				></top-panel>
 			</el-header>
 			<el-container class="middle">
@@ -337,4 +362,4 @@
 			margin-top: 5px;
 		}
 	}
-</style>
+</style>

package/src/components/svg-editor/top-panel.vue

@@ -14,7 +14,7 @@
 	const globalStore = useGlobalStore(pinia)
 	const editPrivateStore = useEditPrivateStore(pinia)
 	const configStore = useConfigStore(pinia)
-	const emits = defineEmits(['changeVisible', 'onReturn', 'onPreview', 'onSave'])
+	const emits = defineEmits(['changeVisible', 'onReturn', 'onPreview', 'onSave', 'onExportSvg'])
 	const onDeleteBtnClick = () => {
 		globalStore.done_json.length <= 0 || globalStore.setDoneJson([])
 		globalStore.intention = EGlobalStoreIntention.None
@@ -105,6 +105,9 @@
 				>
 					<svg-analysis name="export" />
 				</el-icon>
+				<el-icon title="保存为SVG文件" :size="24" class="bt-Icon ml-5px" @click="emits('onExportSvg')">
+					<svg-analysis name="svg-file" />
+				</el-icon>
 				<el-divider direction="vertical" />
 				<el-icon
 					title="创建连线"
@@ -238,4 +241,4 @@
 			line-height: 1.9;
 		}
 	}
-</style>
+</style>

package/src/utils/export-svg.ts

@@ -0,0 +1,423 @@
+const SVG_NS = 'http://www.w3.org/2000/svg'
+const XLINK_NS = 'http://www.w3.org/1999/xlink'
+const XHTML_NS = 'http://www.w3.org/1999/xhtml'
+
+const HTML_STYLE_KEYS = [
+	'display',
+	'position',
+	'top',
+	'right',
+	'bottom',
+	'left',
+	'float',
+	'clear',
+	'visibility',
+	'opacity',
+	'z-index',
+	'box-sizing',
+	'width',
+	'height',
+	'min-width',
+	'min-height',
+	'max-width',
+	'max-height',
+	'margin-top',
+	'margin-right',
+	'margin-bottom',
+	'margin-left',
+	'padding-top',
+	'padding-right',
+	'padding-bottom',
+	'padding-left',
+	'overflow',
+	'overflow-x',
+	'overflow-y',
+	'border-top-width',
+	'border-right-width',
+	'border-bottom-width',
+	'border-left-width',
+	'border-top-style',
+	'border-right-style',
+	'border-bottom-style',
+	'border-left-style',
+	'border-top-color',
+	'border-right-color',
+	'border-bottom-color',
+	'border-left-color',
+	'border-top-left-radius',
+	'border-top-right-radius',
+	'border-bottom-left-radius',
+	'border-bottom-right-radius',
+	'background-color',
+	'background-image',
+	'background-position',
+	'background-size',
+	'background-repeat',
+	'box-shadow',
+	'color',
+	'font-family',
+	'font-size',
+	'font-weight',
+	'font-style',
+	'line-height',
+	'letter-spacing',
+	'text-align',
+	'text-decoration-line',
+	'text-decoration-color',
+	'text-transform',
+	'white-space',
+	'word-break',
+	'vertical-align',
+	'list-style-type',
+	'border-collapse',
+	'border-spacing',
+	'table-layout',
+	'flex-direction',
+	'flex-wrap',
+	'flex-grow',
+	'flex-shrink',
+	'flex-basis',
+	'align-items',
+	'align-content',
+	'align-self',
+	'justify-content',
+	'order',
+	'gap',
+	'row-gap',
+	'column-gap',
+	'grid-template-columns',
+	'grid-template-rows',
+	'grid-column',
+	'grid-row'
+]
+
+const SKIP_STYLE_KEYS = new Set([
+	'animation',
+	'animation-name',
+	'animation-duration',
+	'animation-delay',
+	'animation-timing-function',
+	'animation-iteration-count',
+	'animation-direction',
+	'animation-fill-mode',
+	'animation-play-state',
+	'transition',
+	'transition-property',
+	'transition-duration',
+	'transition-delay',
+	'transition-timing-function',
+	'transform',
+	'transform-origin',
+	'transform-box',
+	'cursor',
+	'pointer-events',
+	'will-change',
+	'user-select'
+])
+
+interface IExportSvgOptions {
+	filename?: string
+	background?: string
+	padding?: number
+}
+
+const inlineComputedStyle = (source: Element, clone: Element) => {
+	if (source.namespaceURI !== SVG_NS) {
+		const computed = window.getComputedStyle(source as HTMLElement)
+		const style = (clone as HTMLElement).style
+		HTML_STYLE_KEYS.forEach((key) => {
+			if (SKIP_STYLE_KEYS.has(key)) {
+				return
+			}
+			const value = computed.getPropertyValue(key)
+			if (value) {
+				style.setProperty(key, value)
+			}
+		})
+	}
+	const sourceChildren = source.children
+	const cloneChildren = clone.children
+	const length = Math.min(sourceChildren.length, cloneChildren.length)
+	for (let i = 0; i < length; i++) {
+		inlineComputedStyle(sourceChildren[i], cloneChildren[i])
+	}
+}
+
+const inlineForeignObjectStyles = (sourceSvg: Element, cloneSvg: Element) => {
+	const sourceObjects = Array.from(sourceSvg.querySelectorAll('foreignObject'))
+	const cloneObjects = Array.from(cloneSvg.querySelectorAll('foreignObject'))
+	const length = Math.min(sourceObjects.length, cloneObjects.length)
+	for (let i = 0; i < length; i++) {
+		const sourceRoot = sourceObjects[i].firstElementChild
+		const cloneRoot = cloneObjects[i].firstElementChild
+		if (sourceRoot && cloneRoot) {
+			inlineComputedStyle(sourceRoot, cloneRoot)
+		}
+	}
+}
+
+const replaceCanvas = (sourceSvg: Element, cloneSvg: Element) => {
+	const sourceCanvasList = Array.from(sourceSvg.querySelectorAll('foreignObject canvas')) as HTMLCanvasElement[]
+	const cloneCanvasList = Array.from(cloneSvg.querySelectorAll('foreignObject canvas')) as HTMLCanvasElement[]
+	const length = Math.min(sourceCanvasList.length, cloneCanvasList.length)
+	for (let i = 0; i < length; i++) {
+		const sourceCanvas = sourceCanvasList[i]
+		const cloneCanvas = cloneCanvasList[i]
+		try {
+			const dataUrl = sourceCanvas.toDataURL('image/png')
+			const computed = window.getComputedStyle(sourceCanvas)
+			const img = document.createElementNS(XHTML_NS, 'img')
+			img.setAttribute('src', dataUrl)
+			img.setAttribute('style', `display:block;width:${computed.width};height:${computed.height};`)
+			cloneCanvas.replaceWith(img)
+		} catch (e) {
+			console.warn('export svg: canvas 转换失败', e)
+		}
+	}
+}
+
+const collectUseHref = (root: Element, ids: Set<string>) => {
+	root.querySelectorAll('use').forEach((use) => {
+		const href = use.getAttribute('xlink:href') || use.getAttribute('href')
+		if (href && href.startsWith('#')) {
+			ids.add(href.slice(1))
+		}
+	})
+}
+
+const copySymbols = (cloneSvg: Element, defs: Element) => {
+	const usedIds = new Set<string>()
+	collectUseHref(cloneSvg, usedIds)
+
+	const existingIds = new Set<string>()
+	cloneSvg.querySelectorAll('[id]').forEach((el) => {
+		const id = el.getAttribute('id')
+		if (id) {
+			existingIds.add(id)
+		}
+	})
+
+	const pending = Array.from(usedIds)
+	while (pending.length > 0) {
+		const id = pending.shift()
+		if (!id || existingIds.has(id)) {
+			continue
+		}
+		const sourceSymbol = document.getElementById(id)
+		if (!sourceSymbol) {
+			continue
+		}
+		defs.appendChild(sourceSymbol.cloneNode(true))
+		existingIds.add(id)
+		const childIds = new Set<string>()
+		collectUseHref(sourceSymbol, childIds)
+		childIds.forEach((childId) => {
+			if (!existingIds.has(childId) && pending.indexOf(childId) < 0) {
+				pending.push(childId)
+			}
+		})
+	}
+}
+
+const removeEditorOnly = (cloneSvg: Element) => {
+	cloneSvg.querySelectorAll('[data-editor-only]').forEach((el) => el.remove())
+}
+
+const computeContentBound = (content: Element | null) => {
+	if (!content) {
+		return null
+	}
+	const editorOnlyList = Array.from(content.querySelectorAll('[data-editor-only]')) as HTMLElement[]
+	const oldDisplayList = editorOnlyList.map((el) => el.style.display)
+	let box: SVGRect | null = null
+	try {
+		editorOnlyList.forEach((el) => (el.style.display = 'none'))
+		box = (content as SVGGraphicsElement).getBBox()
+	} catch (e) {
+		console.warn('export svg: 计算画布内容边界失败', e)
+	} finally {
+		editorOnlyList.forEach((el, index) => (el.style.display = oldDisplayList[index]))
+	}
+	return box
+}
+
+const collectAnimationClassNames = (svg: Element) => {
+	const names = new Set<string>()
+	svg.querySelectorAll('[class]').forEach((el) => {
+		Array.from(el.classList).forEach((name) => {
+			if (name.indexOf('animate__') === 0) {
+				names.add(name)
+			}
+		})
+	})
+	return names
+}
+
+const matchAnimationClass = (selectorText: string, classNames: Set<string>) => {
+	let matched = false
+	classNames.forEach((name) => {
+		if (selectorText.indexOf(`.${name}`) > -1) {
+			matched = true
+		}
+	})
+	return matched
+}
+
+const walkStyleRules = (rules: CSSRuleList, onRule: (rule: CSSStyleRule) => void) => {
+	Array.from(rules).forEach((rule) => {
+		if (rule instanceof CSSStyleRule) {
+			onRule(rule)
+		} else if ((rule as CSSMediaRule).cssRules) {
+			walkStyleRules((rule as CSSMediaRule).cssRules, onRule)
+		}
+	})
+}
+
+const collectAnimationCss = (svg: Element) => {
+	const classNames = collectAnimationClassNames(svg)
+	if (classNames.size === 0) {
+		return ''
+	}
+	const styleRules: string[] = []
+	const keyframesNames = new Set<string>()
+	const keyframesRules: string[] = []
+
+	Array.from(document.styleSheets).forEach((sheet) => {
+		let rules: CSSRuleList | null = null
+		try {
+			rules = sheet.cssRules
+		} catch (e) {
+			rules = null
+		}
+		if (!rules) {
+			return
+		}
+		walkStyleRules(rules, (rule) => {
+			if (!matchAnimationClass(rule.selectorText, classNames)) {
+				return
+			}
+			styleRules.push(rule.cssText)
+			const animationName = rule.style.getPropertyValue('animation-name')
+			if (animationName) {
+				animationName.split(',').forEach((name) => keyframesNames.add(name.trim()))
+			}
+		})
+		Array.from(rules).forEach((rule) => {
+			if (rule instanceof CSSKeyframesRule && keyframesNames.has(rule.name)) {
+				keyframesRules.push(rule.cssText)
+			}
+		})
+	})
+
+	if (styleRules.length === 0) {
+		return ''
+	}
+
+	keyframesNames.forEach((name) => {
+		if (keyframesRules.some((css) => css.indexOf(`@keyframes ${name}`) > -1)) {
+			return
+		}
+		Array.from(document.styleSheets).forEach((sheet) => {
+			let rules: CSSRuleList | null = null
+			try {
+				rules = sheet.cssRules
+			} catch (e) {
+				rules = null
+			}
+			if (!rules) {
+				return
+			}
+			Array.from(rules).forEach((rule) => {
+				if (rule instanceof CSSKeyframesRule && rule.name === name) {
+					keyframesRules.push(rule.cssText)
+				}
+			})
+		})
+	})
+
+	return [...styleRules, ...keyframesRules].join('\n')
+}
+
+export const getCanvasSvgString = (svg: SVGSVGElement, options: IExportSvgOptions = {}) => {
+	const padding = options.padding ?? 20
+	const content = svg.querySelector('[data-canvas-content]')
+	let box: SVGRect | null = computeContentBound(content)
+
+	if (!box || !box.width || !box.height) {
+		const rect = svg.getBoundingClientRect()
+		box = {
+			x: 0,
+			y: 0,
+			width: rect.width || 800,
+			height: rect.height || 600
+		} as SVGRect
+	}
+
+	const viewBox = {
+		x: box.x - padding,
+		y: box.y - padding,
+		width: box.width + padding * 2,
+		height: box.height + padding * 2
+	}
+
+	const clone = svg.cloneNode(true) as SVGSVGElement
+	removeEditorOnly(clone)
+
+	const cloneContent = clone.querySelector('[data-canvas-content]')
+	if (cloneContent) {
+		cloneContent.removeAttribute('transform')
+		cloneContent.removeAttribute('data-canvas-content')
+	}
+
+	replaceCanvas(svg, clone)
+	inlineForeignObjectStyles(svg, clone)
+
+	clone.setAttribute('xmlns', SVG_NS)
+	clone.setAttribute('xmlns:xlink', XLINK_NS)
+	clone.setAttribute('width', `${Math.ceil(viewBox.width)}`)
+	clone.setAttribute('height', `${Math.ceil(viewBox.height)}`)
+	clone.setAttribute('viewBox', `${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`)
+
+	const defs = (clone.querySelector('defs') as Element) || document.createElementNS(SVG_NS, 'defs')
+	if (!defs.parentNode) {
+		clone.insertBefore(defs, clone.firstChild)
+	}
+
+	copySymbols(clone, defs)
+
+	const style = document.createElementNS(SVG_NS, 'style')
+	const animationCss = collectAnimationCss(svg)
+	style.textContent = `.common-ani{transform-box:fill-box;}${animationCss ? `\n${animationCss}` : ''}`
+	defs.appendChild(style)
+
+	if (options.background) {
+		const background = document.createElementNS(SVG_NS, 'rect')
+		background.setAttribute('x', `${viewBox.x}`)
+		background.setAttribute('y', `${viewBox.y}`)
+		background.setAttribute('width', `${viewBox.width}`)
+		background.setAttribute('height', `${viewBox.height}`)
+		background.setAttribute('fill', options.background)
+		clone.insertBefore(background, clone.firstChild)
+	}
+
+	return `<?xml version="1.0" encoding="UTF-8"?>\n${new XMLSerializer().serializeToString(clone)}`
+}
+
+export const downloadSvgFile = (content: string, filename?: string) => {
+	const name = (filename || `svg-canvas-${Date.now()}`).replace(/\.svg$/i, '')
+	const blob = new Blob([content], { type: 'image/svg+xml;charset=utf-8' })
+	const url = URL.createObjectURL(blob)
+	const link = document.createElement('a')
+	link.href = url
+	link.download = `${name}.svg`
+	link.style.display = 'none'
+	document.body.appendChild(link)
+	link.click()
+	document.body.removeChild(link)
+	setTimeout(() => URL.revokeObjectURL(url), 0)
+}
+
+export const exportCanvasSvg = (svg: SVGSVGElement, options: IExportSvgOptions = {}) => {
+	const content = getCanvasSvgString(svg, options)
+	downloadSvgFile(content, options.filename)
+}