I have an SVG file with multiple icons, but I only want to display and resize one of them.
https://i.sstatic.net/al6kP.png
I've checked out a few articles, but none of the solutions seem to work for me.
I attempted the following method:
<p class="crop"><img src="/WebNew/Content/main_page_assets/02_general_alerts_icons.svg"/></p>
.crop {
float: left;
margin: .5em 10px .5em 0;
overflow: hidden; /* this is important */
position: relative; /* this is important too */
border: 1px solid #ccc;
width: 150px;
height: 90px;
}
.crop img {
position: absolute;
top: 0px;
left: -55px;
}
Would appreciate if someone could provide a working fiddle solution!