svg code 转图片_您需要了解在VS Code中使用SVG的知识

svg code 转图片

Check out this VS Code release highlights video from Brian Clark. Towards the end, he shows how you can now zoom in on image previews in VS Code.

观看此VS Code版本的精彩视频，摘自Brian Clark的 视频 。 最后，他展示了如何在VS Code中放大图像预览。

I thought that was an interesting feature. I mean, let’s face it — there are only two types of people in the world: those who like to zoom in on images and those who won’t admit it. So I opened a project that I had to test it out and sure enough, it works as advertised.

我认为这是一个有趣的功能。 我的意思是，让我们面对现实–世界上只有两种人：喜欢放大图像的人和不愿意接受图像的人。 因此，我打开了一个项目，我必须对其进行测试，并且确实可以按照广告中的说明进行操作。

My next thought was to see if it worked on SVG images. Because I like to zoom in on SVG and watch it not degrade. At this point in my life, that is an enjoyable and fulfilling activity.

我的下一个想法是查看它是否可用于SVG图像。 因为我喜欢放大SVG并观看它不会降级。 在我生命中的这一刻，这是一种愉快而充实的活动。

It turns out that VS Code does not provide a visual preview for SVG files from within the editor. Which makes sense. SVG is markup and VS Code treats SVG files like XML, which is only text. You would need XSLT to render it into something you could view. I just triggered a bunch of you, and for that, I apologize.

事实证明，VS Code不能从编辑器中为SVG文件提供视觉预览。 有道理。 SVG是标记，而VS Code将SVG文件视为XML(仅是文本)。 您将需要XSLT使其呈现为您可以查看的内容 。 我刚刚触发了一群人，为此，我深表歉意。

Here is a great joke about XML to soothe your anxiety:

这是一个有关缓解焦虑的XML的好笑话：

“XML is like violence: If it isn’t working, you aren’t using enough of it”

“ XML就像暴力：如果不起作用，说明您使用的不够多”

- Unknown

-未知

This got me wondering, if VS Code treats SVG like XML, what extensions are available to help me work with SVG in VS Code? It turns out that there are quite a few, and some work better than others. Here are a few of my favorite extensions for working with SVG in VS Code.

这让我想知道，如果VS Code将SVG像XML一样对待，可以使用哪些扩展来帮助我在VS Code中使用SVG？ 事实证明，其中有很多功能，有些功能比其他功能更好。 这是我最喜欢的一些在VS Code中使用SVG的扩展。

SVG (SVG)

The first extension is just called SVG.

第一个扩展名为SVG 。

That’s right. This person was first to the game and got the coveted SVG name all to themselves. Like the person who registered the Twitter name “Burke.” What the heck, Sam! You haven’t tweeted in….YOU’VE NEVER TWEETED!

那就对了。 这个人是第一个进入游戏的人，他自己就拥有了梦vet以求的SVG名称。 就像注册Twitter名称“ Burke”的人一样。 哎呀，萨姆！ 您尚未发过推文……您从未发布过推文！

As you can see from this GIF here, out the box Visual Studio Code has limited support for SVG because we know that it treats it like XML. It knows how to appropriately highlight the markup, but that’s about it. Notice that it literally has no suggestions for me here when I try and create this rectangle.

从这里的GIF中可以看出，Visual Studio Code对SVG的支持有限，因为我们知道它像XML一样对待。 它知道如何适当地突出显示标记，仅此而已。 请注意，当我尝试创建此矩形时，这里实际上没有任何建议。

The primary thing the “SVG” extension does is add language support for SVG to Visual Studio Code. So now when I start typing rect, it gives me options for elements I may want to select and a description of what they are.

“ SVG”扩展的主要作用是在Visual Studio Code中添加对SVG的语言支持。 因此，现在当我开始输入rect ，它为我提供了可能要选择的元素的选项以及它们的描述。

Once it has the element, it now knows about all of the possible attributes as well.

一旦有了元素，它现在也知道所有可能的属性。

And it even knows the values for some of these attributes if they are enumerations.

如果它们是枚举，它甚至还知道其中某些属性的值。

预习 (Preview)

This extension also provides a “Preview” function that shows a side-by-side preview with the markup and the rendered image. This is available from the Command Pallet (Ctrl/Cmd + Shift + P).

此扩展程序还提供了“预览”功能，可显示带有标记和渲染图像的并排预览。 可以从命令面板(Ctrl / Cmd + Shift + P)获得。

The cool thing about this is that the preview updates live as you type your SVG. This makes for a pretty neat sandbox for building out SVG images by hand if that’s your jam.

有趣的是，预览更新会在您键入SVG时实时显示。 这就是一个漂亮整洁的沙箱，可以用来手动构建SVG图像。

缩小 (Minify)

This extension also includes a minify command that will minify your SVG using SVGO. Take this beautiful image of a hillside created with Sketch. Yes, I made it all by myself.

此扩展程序还包括一个minify命令，该命令将使用SVGO最小化SVG。 拍摄这张用Sketch创建的山坡的美丽图像。 是的，我自己做的。

This image is already pretty small. It comes in at around 9kb on disk. The SVG extension provides a “Minify” command in the Command Pallet (Ctrl/Cmd + Shift + P). Using that command reduces the size of the image to 5kb. That’s nearly half. Pretty impressive.

该图像已经很小。 它在磁盘上大约为9kb。 SVG扩展在命令面板中提供了“缩小”命令(Ctrl / Cmd + Shift + P)。 使用该命令可将图像大小减小到5kb。 差不多一半了。 令人印象深刻。

If we use the inline Git differentials in VS Code we can see some of what SVGO is doing. It’s removing things we don’t need like “id” or a parameter of 0 where the default is already 0. It also converted my rect to path. I have no idea why, but that’s super interesting! Whatever, SVGO. I trust you. Do your thing.

如果我们在VS Code中使用内联Git差分，则可以看到SVGO的某些功能。 它删除了不需要的东西，例如“ id”或参数0(默认值已经为0)。它还将我的rect转换为path 。 我不知道为什么，但是那很有趣！ 无论如何，SVGO。 我信任你。 做你的事。

That’s most of what SVG for VS Code does. But there is another SVG extension that is also relevant here — SVG Viewer.

这就是SVG for VS Code所做的大部分工作。 但是，这里还有另一个与SVG相关的扩展-SVG Viewer 。

SVG查看器 (SVG Viewer)

SVG Viewer - Visual Studio MarketplaceExtension for Visual Studio Code - SVG Viewer for Visual Studio Code.marketplace.visualstudio.com

SVG Viewer- 用于Visual Studio Code的 Visual Studio市场 扩展-用于Visual Studio Code的SVG Viewer。 marketplace.visualstudio.com

SVG Viewer provides the same side-by-side image preview that the SVG extension does. However, this one has two main advantages. First, you can auto-open the preview whenever you click on an svg file by adding the following line to your User Preferences file.

SVG Viewer提供与SVG扩展程序相同的并排图像预览。 但是，这有两个主要优点。 首先，只要在svg文件上单击，就可以通过在用户首选项文件中添加以下行来自动打开预览。

"svgviewer.enableautopreview": true,

AND, it shrinks the image to fit the window. I don’t know if I like this yet, but I think that I do. I think I prefer this over a giant image that I can’t see the entirety of.

并且，它会缩小图像以适合窗口。 我不知道我是否喜欢这样，但我认为我喜欢。 我认为我更喜欢这种图像，而不是看不到全部图像。

转换为PNG (Convert To PNG)

This extension also adds a convert command, so you can inline convert your SVG to PNG. Take this truck image. I exported it as SVG, but it’s just a data URI wrapped in an svg tag. There’s no point in that. I might as well take it back to a static image. With this extension, I don’t need to go back to Sketch to do that.

此扩展程序还添加了convert命令，因此您可以将SVG内联转换为PNG。 拍摄这张卡车图像。 我将其导出为SVG，但这只是包裹在svg标签中的数据URI。 毫无意义。 我不妨将其恢复为静态图像。 有了这个扩展，我不需要回到Sketch上去做。

This extension also allows you to copy the data URI scheme of any SVG. I guess that’s nice, but it’s not something that I ever do. I’m sure I will need to do it now that I have said that.

此扩展名还允许您复制任何SVG的数据URI方案。 我想那很好，但这不是我做过的事。 我确信我已经说过了。

The last extension worth noting is the SVG Editor.

最后一个值得注意的扩展是SVG编辑器 。

SVG编辑器 (SVG Editor)

SVG Editor - Visual Studio MarketplaceExtension for Visual Studio Code - Visual and literal SVG editor for VSCode.marketplace.visualstudio.com

SVG编辑器 -Visual Studio Code的 Visual Studio市场 扩展-VSCode的可视和文字SVG编辑器。 marketplace.visualstudio.com

The SVG Editor extension is super aggressive. It attempts to create a complete SVG editing surface inside of VS Code, complete with drawing tools and the whole nine yards.

SVG编辑器扩展超级激进。 它尝试在VS Code内创建完整的SVG编辑图面，并带有绘图工具和整个九码。

It’s important to note that this extension doesn’t work for me at all. Like it’s there, but it just doesn’t do anything as far as I can tell. Or maybe I’m doing it wrong. There is a high likelihood of that. My comprehensive testing approach consisted of “click around a bunch and see what happens.” Nothing ever did.

请务必注意，此扩展程序对我根本不起作用。 就像它在那里，但据我所知，它什么也没做。 也许我做错了。 这种可能性很大。 我全面的测试方法包括“点击一下，看看会发生什么”。 没事

Yep — doesn’t work. But a tip of the hat for trying to build a graphics editor into Visual Studio Code. That’s no easy task, and the fact that someone even attempted to do it is highly impressive to me.

是的-不起作用。 但是，尝试将图形编辑器构建到Visual Studio Code中只是一小步。 这不是一件容易的事，有人甚至试图做到这一点对我来说印象深刻。

享受您的SVG (Enjoy Your SVG)

With extensions, VS Code has some pretty solid support for SVG. The two big things for me are the code completion and the preview. Although I should note that you cannot zoom in on any of the previews, so I still can’t satisfy my weird craving to watch the vector graphics scale.

通过扩展，VS Code对SVG具有相当可靠的支持。 对我来说，两件大事是代码完成和预览。 尽管我应该注意您无法放大任何预览，但是我仍然无法满足我对观看矢量图形比例的渴望。

You can grab the latest version of VS Code today and install these SVG extensions at your leisure.

您可以立即获取最新版本的VS Code，并在闲暇时安装这些SVG扩展。

翻译自: https://www.freecodecamp.org/news/things-you-need-to-know-about-working-with-svg-in-vs-code-63be593444dd/

svg code 转图片