如何将网站上的 SVG 保存到我的计算机?

平面设计 网站设计 svg 保存
2021-12-26 11:56:10

我需要使用该网站的徽标(在左上角):

在此处输入图像描述

这是我从页面复制的一段代码:

<svg viewBox="0 0 215 50" height="50" width="215" xmlns="http://www.w3.org/2000/svg"><path d="M128.783 40.08v7.74h2.078v-5.66h18.843v5.66h2.08v-7.74h-3.322V5.82h-14.017c0 14.588-.467 23.26-2.596 34.263h-3.064zm-43.58 2.08h4.154V5.82h-4.153v3.116l-9.138 24.352V5.818h-4.153V42.16h4.153v-3.114l9.138-24.35v27.465zm-22.842 0h4.36l-6.904-21.08 4.83-15.262h-2.13l-4.88 15.263H52.08V5.82h-4.155V42.16h4.156v-19h4.048l6.233 19zm71.562-2.08c1.764-10.433 2.492-18.842 2.598-32.186h7.783V40.08h-10.38zm74.6 2.08h4.31L204.894 5.82h-4.31l.88 4.206-6.852 32.137h2.13l2.59-12.097h6.548l2.643 12.098zm-169.574 0h4.31L35....8zm147.355 0h4.158V5.82h-13.968v2.076c-.05 8.05-.414 18.12-1.143 23.204-.466 3.066-1.61 5.508-3.532 5.508v5.555c3.588 0 4.623-4.83 5.246-9.24.936-6.752 1.4-16.976 1.506-25.025h7.732V42.16zM159.88 7.896h9.347V5.818H155.73V42.16h13.497v-2.08h-9.348V20.564h7.265v-2.076h-7.266V7.895zm-59.1 0h9.34V5.818H96.626V42.16h13.496v-2.08h-9.34V20.564h7.266v-2.076h-7.265V7.895zm-96.2 0h8.306v34.267h4.152V7.895h8.306V5.818H4.58v2.077zm28.396 6.023l2.858 14.067h-5.66l2.802-14.067zm169.58 0l2.853 14.067h-5.66l2.807-14.067z"></svg>

我对此不是很熟练,但已经尝试将其粘贴到文本文件中,并进一步保存为“.svg”,但都是徒劳的。
(可能标签有问题)

PS:版权一切正常!我现在无法联系该网站的其他设计师来索取矢量图。

4个回答

您可以在 javascript 控制台上运行此代码:

var e = document.createElement('script');
e.setAttribute('src', 'https://nytimes.github.io/svg-crowbar/svg-crowbar.js'); 
e.setAttribute('class', 'svg-crowbar');
document.body.appendChild(e);

或使用书签。非常适合我:

在此处输入图像描述

您发布的代码段不是有效的 XML。它需要一个 XML 声明并且<path>需要关闭标签。

<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 215 50" height="50" width="215" xmlns="http://www.w3.org/2000/svg">
    <path
    d="M128.783 40.08v7.74h2.078v-5.66h18.843v5.66h2.08v-7.74h-3.322V5.82h-14.017c0 14.588-.467 23.26-2.596 34.263h-3.064zm-43.58 2.08h4.154V5.82h-4.153v3.116l-9.138 24.352V5.818h-4.153V42.16h4.153v-3.114l9.138-24.35v27.465zm-22.842 0h4.36l-6.904-21.08 4.83-15.262h-2.13l-4.88 15.263H52.08V5.82h-4.155V42.16h4.156v-19h4.048l6.233 19zm71.562-2.08c1.764-10.433 2.492-18.842 2.598-32.186h7.783V40.08h-10.38zm74.6 2.08h4.31L204.894 5.82h-4.31l.88 4.206-6.852 32.137h2.13l2.59-12.097h6.548l2.643 12.098zm-169.574 0h4.31L35....8zm147.355 0h4.158V5.82h-13.968v2.076c-.05 8.05-.414 18.12-1.143 23.204-.466 3.066-1.61 5.508-3.532 5.508v5.555c3.588 0 4.623-4.83 5.246-9.24.936-6.752 1.4-16.976 1.506-25.025h7.732V42.16zM159.88 7.896h9.347V5.818H155.73V42.16h13.497v-2.08h-9.348V20.564h7.265v-2.076h-7.266V7.895zm-59.1 0h9.34V5.818H96.626V42.16h13.496v-2.08h-9.34V20.564h7.266v-2.076h-7.265V7.895zm-96.2 0h8.306v34.267h4.152V7.895h8.306V5.818H4.58v2.077zm28.396 6.023l2.858 14.067h-5.66l2.802-14.067zm169.58 0l2.853 14.067h-5.66l2.807-14.067z"
    />
</svg>

但是,即使在修复了这些东西之后,如果我在 Inkscape 中打开它,它仍然看起来不像网站上的徽标。您最好尝试这样的方法来提取 SVG。

如果您在 macOS 上使用 Safari,则有内置功能。只需右键单击 SVG 图像,点击“将页面另存为...”,然后在出现的下拉菜单中选择“格式:页面源”。

在此处输入图像描述

在此处输入图像描述

适合我的解决方案(在 Mac 上):

1 - 将徽标拖到桌面(任何浏览器)

在某些情况下,页面代码允许您将 .SVG 文件从网站直接拖到桌面或所选文件夹中。超级简单!

在此处输入图像描述

2 - 打印到 PDF(Safari、Firefox)

这需要更多的工作,现在可能总是有效。在“打印”对话框中,转到 PDF > 另存为 PDF。预览应该允许您查看徽标是否将被导出(有时,它不起作用)。导出后,您可以在您选择的矢量编辑应用程序中打开文件。

3 - 从 Chrome 的 Inspector 拖放

这可能在绝望的情况下起作用。检查徽标元素,并将鼠标悬停在其名称上。将出现一个带有缩略图的小窗口,其中包含徽标。单击小徽标,将其拖到文件夹中。

在此处输入图像描述

可能还有上面提到的其他解决方案(复制代码并以某种方式转换它 - 在第三个网站示例中,我展示了这不起作用,因为代码看起来像这样,或者SVG Crowbar有时也可以工作(有时不是 - 就像下载框重叠)。