CODEWITHSUNDEEP
htmlcsssvg
Henry
Henry

Reputation: 1755

Scaling an SVG that is not inline

First, let me apologise for not knowing the proper terms for things. I'm new to SVG and am working to a tight deadline.

I wanted some scalable icons for a website I am redesigning and I persuaded a graphic artist friend of mine to create these icons for me in Inkscape. These icons are meant to be very small, roughly 25 pixels x 25 pixels and to indicate email links, internal links and external links. I plan to use the appropriate one on each anchor tag in my site.

The icons she created are quite nice but render very large in the browser. Opening the icons in the Eclipse text editor, I can see the following values:

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

 y="0"

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

In the course of trying to figure out how to make the icons smaller, I've seen multiple references to this article as a good one for scaling SVGs: https://css-tricks.com/scale-svg/

Unfortunately, I'm getting quite confused on what I need to do in my case since I don't have an inline SVG. (I'm not sure what mine is properly called: an external SVG?) Also, I'm not using IMG or SVG tags in my HTML markup. I've created special classes of anchors called internal-link, external-link, and email-link and I'm pointing to my SVGs via ::before pseudo-selectors as in this example: 

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

This approach allows me to keep my HTML markup nice and simple, as in this example:

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

Unfortunately, the article doesn't address my approach where I am NOT using IMG or SRC tags or the content property of a ::before selector so I'm really not sure what to do to make my icon suitably small.

For what it's worth, I have tinkered with the icons themselves and changed the aforementioned values so that the 540 was changed to 35 in each instance and y was changed to 10 to push it down a bit to be roughly lined up with the baseline of the text shown in the anchor but I have to believe there is a better approach. Editing the icon itself would seem to limit it to being only one size forever and forcing me to make multiple versions of the icon for each size I want, which would appear to defeat the purpose of making them scalable in the first place. I'm hoping I can leave the icon unaltered and ONLY adjust the CSS to control the scaling.

Is that possible? If so, how?

Upvotes: 1

Views: 177

Answers (2)

Henry
Henry

Reputation: 1755

With many thanks to enxaneta, I now have my code working exactly as I wanted. The original SVG files are completely untouched and I've been able to keep my original HTML unchanged as well; I didn't add the div that enxaneta proposed and just did this:

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

Ultimately, I just needed to tweak enxaneta's CSS a little bit so that now it says:

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

The height got reduced slightly so that I could push my icon down a few pixels. I added the background-position property to enable me to move the icon around a bit within its bounding box. I found that the width, height, and margin properties in the .external-link selector that enxaneta provided made no difference at all so I just deleted them. Now my icons appear right where I want them to be.

Enxaneta's reply was extremely valuable to me because I really didn't know that I could use anything beyond the content property in a ::before pseudo-selector! The only examples I had seen showed only the content property. Knowing that I can use all the standard properties there did a lot to enable me to tweak enxaneta's suggestion to fit my precise needs.

I hope this helps someone in the future....

Upvotes: 1

enxaneta
enxaneta

Reputation: 33024

I understand you need to use the svg icons with the ::before

In the next example I'm using the svg image as background image of the ::before and background-size:cover. I'm also setting the width and the height of ::before proportional to the size of the image.

.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>

Upvotes: 1

Related Questions