Масштабирование SVG, которое не является встроенным

Question

Во-первых, позвольте мне извиниться за то, что не знал правильных терминов для вещей.Я новичок в SVG и работаю в сжатые сроки.

Мне нужны масштабируемые значки для веб-сайта, который я переделываю, и я убедил своего друга-художника-графика создать эти значки для меня в Inkscape.Эти значки должны быть очень маленькими, примерно 25 x 25 пикселей и обозначать ссылки электронной почты, внутренние ссылки и внешние ссылки.Я планирую использовать соответствующую ссылку на каждый тег привязки на моем сайте.

Значки, которые она создала, довольно хороши, но в браузере отображаются очень большимиОткрывая значки в текстовом редакторе Eclipse, я вижу следующие значения:

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

 y="0"

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

В ходе попытки выяснить, как сделать значки меньше, я видел несколько ссылок на эту статью какхороший вариант для масштабирования SVG: https://css -tricks.com / scale-svg /

К сожалению, я не совсем понимаю, что мне нужно делать в моем случае, так как янет встроенного SVG.(Я не уверен, что мой правильно называется: внешний SVG?) Кроме того, я не использую теги IMG или SVG в моей разметке HTML.Я создал специальные классы якорей, которые называются internal-link, external-link и email-link, и я указываю на свои SVG через псевдо-селекторы :: before, как в этом примере:

/* 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>

К сожалению, в статье не рассматривается мой подход, в котором я НЕ использую теги IMG или SRC или свойство содержимогоиз селектора :: before, так что я действительно не уверен, что нужно сделать, чтобы мой значок был достаточно маленьким.

Для чего бы то ни было, я возился с самими значками и изменил вышеупомянутые значения, так что 540 был изменен на 35 в каждом экземпляре, а у был изменен на 10, чтобы немного опустить его, чтобы он был примерно выровненс базовой линии текста, показанного в якоре, но я должен верить, что есть лучший подход.Редактирование самой иконки, казалось бы, навсегда ограничило бы ее одним размером и вынудило бы меня сделать несколько версий иконки для каждого размера, который я хочу, что, по-видимому, не позволило бы сделать их масштабируемыми в первую очередь.Я надеюсь, что могу оставить иконку без изменений и ТОЛЬКО настроить CSS для управления масштабированием.

Возможно ли это?Если да, то как?

Answer 1

Большое спасибо enxaneta, теперь мой код работает точно так, как я хотел. Оригинальные файлы SVG полностью не тронуты, и я также смог сохранить свой исходный HTML без изменений; Я не добавил div, который предложил enxaneta, а просто сделал это:

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

В конечном счете, мне просто нужно немного настроить CSS от enxaneta, чтобы теперь он сказал:

/* 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; 
    }

Высота немного уменьшилась, поэтому я мог нажать на иконку на несколько пикселей вниз. Я добавил свойство background-position, чтобы позволить мне немного переместить значок в пределах его ограничительной рамки. Я обнаружил, что свойства width, height и margin в селекторе .external-link, предоставленном enxaneta, не имеют никакого значения, поэтому я просто удалил их. Теперь мои иконки появляются там, где я хочу, чтобы они были.

Ответ Enxaneta был чрезвычайно ценным для меня, потому что я действительно не знал, что смогу использовать что-либо кроме свойства content в псевдо-селекторе :: before! Единственные примеры, которые я видел, показали только свойство контента. Знание того, что я могу использовать все стандартные свойства, сделало многое для того, чтобы я смог изменить предложение enxaneta, чтобы оно соответствовало моим точным потребностям.

Надеюсь, это поможет кому-то в будущем ...

Answer 2

Я так понимаю, вам нужно использовать значки svg с ::before

В следующем примере я использую изображение SVG в качестве фонового изображения ::before и background-size:cover. Я также устанавливаю width и height из ::before, пропорциональные размеру изображения.

.external-link{width:100px; height:100px;margin:20px auto;}

.external-link:before{
content:"";
display:block;
width:30px;
height:35px;
background:skyblue;
background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/apple.svg);
background-size:cover}

<div class="external-link"></div>