Html 缩放未内联的SVG

首先，让我为不知道事物的正确术语而道歉。我是SVG新手，工作期限很紧

我想为我正在重新设计的网站提供一些可缩放的图标，我说服了我的一位平面艺术家朋友在Inkscape中为我创建这些图标。这些图标非常小，大约25像素x 25像素，表示电子邮件链接、内部链接和外部链接。我计划在我的站点的每个锚标签上使用适当的锚标签

她创建的图标非常漂亮，但在浏览器中显示得非常大。在Eclipse文本编辑器中打开图标，可以看到以下值：

viewBox="0 0 540 540"
height="540"
width="540"

 y="0"

 preserveAspectRatio="none"
 height="540"
 width="540" />

在试图找出如何使图标变小的过程中，我看到了本文的多个参考文献，它们是缩放SVG的好方法：

不幸的是，由于我没有内联SVG，我对在我的案例中需要做什么感到非常困惑。（我不确定我的名字叫什么：外部SVG？）另外，我的HTML标记中没有使用IMG或SVG标记。我创建了称为“内部链接”、“外部链接”和“电子邮件链接”的特殊锚类，并通过：：before伪选择器指向我的SVG，如本例所示：

/* External link */
.external-link {
    background-color: green;
}
.external-link::before { 
    content: url("../images/link-external-ana.svg") "  "; 
}

这种方法允许我保持HTML标记的简洁性，如下例所示：

<p>Skype is a widely used 
communications program that works on many computers, tablets, and WiFi-   connected smartphones. 
Skype can be downloaded at <a class="external-link"   href="https://www.skype.com/en/" target="_blank">the Skype website</a>.</p>

Skype是一种广泛使用的 可在许多计算机、平板电脑和WiFi连接的智能手机上运行的通信程序。 Skype可在下载

不幸的是，本文没有讨论我不使用IMG或SRC标记或a：：before选择器的content属性的方法，因此我真的不确定如何使我的图标适当地变小

值得一提的是，我修改了图标本身，并更改了前面提到的值，以便在每个实例中540改为35，y改为10，将其向下推一点，与锚中显示的文本基线大致对齐，但我必须相信有更好的方法。编辑图标本身似乎将其限制为永远只有一个大小，并迫使我为我想要的每个大小制作多个版本的图标，这似乎违背了一开始就让它们可伸缩的目的。我希望我可以保持图标不变，只调整CSS来控制缩放

---

可能吗？如果是，如何使用？

我知道您需要将svg图标与

：：before

在下一个示例中，我将svg图像用作

：before

和

背景大小：cover

的背景图像。我还将

：before

的

宽度和
高度设置为与图像大小成比例


外部链接{宽度：100px；高度：100px；边距：20px自动；}
.外部链接：之前{
内容：“；
显示：块；
宽度：30px；
高度：35px；
背景：天蓝色；
背景图片：url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/apple.svg);
背景尺寸：封面}
多亏了enxaneta，我现在的代码工作完全符合我的要求。原始的SVG文件完全没有改动，我也能够保持我的原始HTML不变；我没有添加enxaneta提议的div，只是这样做了：

<p>Skype can be downloaded at <a class="external-link" href="https://www.skype.com/en/" target="_blank">the Skype website</a>. 

高度稍微降低了，这样我就可以把我的图标向下推几个像素。我添加了“背景位置”属性，使我能够在图标的边界框内移动图标一点。我发现enxaneta提供的.external链接选择器中的宽度、高度和边距属性没有任何区别，所以我只是删除了它们。现在我的图标显示在我想要的地方

Enxaneta的回答对我来说非常有价值，因为我真的不知道除了伪选择器之前的a：：中的content属性之外，我还可以使用任何东西！我看到的唯一示例仅显示内容属性。我知道我可以使用那里的所有标准属性，这使我能够调整enxaneta的建议以满足我的精确需求

我希望这对将来的人有所帮助……
你试过背景尺寸：25px 25px；在.external link:：课前？谢谢你，enxaneta，这几乎是问题的完整解决方案！不幸的是，我在HTML中将这个CSS与我的锚标记相结合时遇到了问题。我不能把一个div放在一个锚标签中，所以我把它改成了一个跨度，但是这会导致中间的断线。我把跨度放在锚定标记周围，但这也增加了一个换行符，这样我可以在一行上得到图标，然后链接从下一行开始。在锚点周围放置一个div（而不是span）会使情况变得更糟：图标和链接都被推到页面的中心，而不是左对齐。有什么想法吗？但是图标以适当的大小显示，而无需编辑SVG文件，这是向前迈出的一大步。现在我只需要哄图标在链接内-我在链接周围放了一个圆形的彩色框，图标应该在框内，而不是在围绕链接的框外的前一行；我只需要将display:block更改为display:inline块。我只需将图标向下推几个像素，它就完美了。。。。完成后，我将报告并发布完整的解决方案。
/* External link */
.external-link {
    background-color: green;
}
.external-link::before { 
    content: "";
    display: inline-block; /* was block */
    width: 30px;
    height: 25px;
    background-position: -3px 2px;
    background-image: url("../images/icons/link-external-ana.svg");
    background-size: cover; 
    }