如何在html中使用svg？

Question

我试着保存一个网站的背景图片。当我单击“查看背景图像”时，就会打开一个新的页面，其中包含确切的图像。但我救不了它。我对svg文件格式不太了解。你能告诉我这是怎么回事吗。下面是这张图片的网址。好像网址上有密码。

  data:image/svg+xml,<svg xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" xmlns%3Axlink%3D"http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink" version%3D"1.1" x%3D"0px" y%3D"0px" width%3D"1180px" height%3D"960px" viewBox%3D"20 0 1180 960" enable-background%3D"new 20 0 1180 960" xml%3Aspace%3D"preserve"><style>.style0{fill%3A%09%23257A80%3B}.style1{stroke-linejoin%3A%09round%3Bstroke%3A%09%2342372F%3Bstroke-linecap%3A%09round%3Bstroke-miterlimit%3A%0910%3Bstroke-width%3A%0930%3Bfill%3A%09none%3B}.style2{fill%3A%09%235B4C41%3B}.style3{stroke-linejoin%3A%09round%3Bstroke%3A%09%2368574A%3Bstroke-linecap%3A%09round%3Bstroke-miterlimit%3A%0910%3Bstroke-width%3A%0920%3Bfill%3A%09none%3B}.style4{stroke-linejoin%3A%09round%3Bstroke%3A%09%235B4C41%3Bstroke-linecap%3A%09round%3Bstroke-miterlimit%3A%0910%3Bstroke-width%3A%0914%3Bfill%3A%09none%3B}.style5{fill%3A%09%234D2A0B%3B}.style6{fill%3A%09%2317A89E%3B}.style7{fill%3A%09%235DC2BB%3B}.style8{stroke-linejoin%3A%09round%3Bstroke%3A%09%2341362F%3Bstroke-linecap%3A%09round%3Bstroke-miterlimit%3A%0910%3Bstroke-width%3A%0940%3Bfill%3A%09none%3B}.style9{stroke-linejoin%3A%09round%3Bstroke%3A%09%2368574A%3Bstroke-linecap%3A%09round%3Bstroke-miterlimit%3A%0910%3Bstroke-width%3A%0930%3Bfill%3A%09none%3B}<%2Fstyle><circle cx%3D"820" cy%3D"460" r%3D"90" class%3D"style0"%2F><path d%3D" M990 630H860c-22 0-40-18-40-40v-70" class%3D"style1"%2F><rect x%3D"970" y%3D"430" width%3D"40" height%3D"450" class%3D"style2"%2F><path d%3D" M1000 670h90c16.5 0 30-13.5 30-30V540" class%3D"style3"%2F><path d%3D" M990 780h-70c-11 0-20-9-20-20v-40" class%3D"style4"%2F><circle cx%3D"990" cy%3D"430" r%3D"20" class%3D"style5"%2F><circle cx%3D"990" cy%3D"350" r%3D"150" class%3D"style6"%2F><circle cx%3D"1120" cy%3D"510" r%3D"80" class%3D"style7"%2F><circle cx%3D"900" cy%3D"690" r%3D"60" class%3D"style6"%2F><circle cx%3D"450" cy%3D"510" r%3D"150" class%3D"style0"%2F><path d%3D" M320 720h80c27.5 0 50-22.5 50-50v-60" class%3D"style8"%2F><rect x%3D"270" y%3D"360" width%3D"60" height%3D"600" class%3D"style2"%2F><path d%3D" M290 600H170c-22 0-40-18-40-40v-90" class%3D"style9"%2F><circle cx%3D"300" cy%3D"360" r%3D"30" class%3D"style5"%2F><circle cx%3D"300" cy%3D"220" r%3D"220" class%3D"style6"%2F><circle cx%3D"130" cy%3D"410" r%3D"110" class%3D"style7"%2F><%2Fsvg>

Answer 1

将"，“之后的所有内容复制到任何URL解码器(例如这)，然后按下"Decode”。这将将所有url编码的字符替换为它们的实际值，然后可以将结果复制到.svg文件并打开它。

Answer 2

是的，它是一个嵌入式文件，您可以在图像的src属性上使用它。在firefox中打开它，然后进行文件/保存。

Answer 3

SVG代表可伸缩矢量图形。XML代码以数学的方式定义形状，使它们能够无限缩放，而不依赖像素来呈现。因此，他们可以显示非常大，或非常小，但仍然看上去很大。

您所拥有的是一组SVG代码，它们被编码以去掉所有非有效的文本元素，如斜杠、等号等等。

那你怎么能把它保存成图像呢？如果您希望能够像普通图像文件一样打开它，则需要将其转换为常规图像文件。这将意味着解码那里的SVG代码，将其保存为文本文档，在矢量编辑软件中打开它，并导出为PNG或JPG。