Unable to render svg image - html

I am unable to render svg image, but other images renders fine.
Please see the code below:
<img onmouseover="this.style.background ='orange',this.style.opacity ='.6'" onmouseout="this.style.opacity ='1',this.style.background =''" style="border-radius: 50%; opacity: 1;" src="/Kentico9/getmedia/8c553839-4a4d-4c26-b0d0-432f8247ae6a/twitter.svg?ext=.svg" title="Twitter">
Please see the four icons are missing from the website ,click on this website website link
If i take image address from above, i could download the file:
Image link
SVG content
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 162 162">
<defs>
<style>.cls-1{fill:#ffffff;}</style>
</defs>
<title>instagram</title>
<path class="cls-1" d="M107.74,57.51q4.2,0,8.4,0a4.2,4.2,0,0,0,4.24-4.2q0-4.24,0-8.48a4.18,4.18,0,0,0-4.28-4.19h-8.35a4.17,4.17,0,0,0-4.23,4.23q0,4.18,0,8.35A4.19,4.19,0,0,0,107.74,57.51Z"/>
<path class="cls-1" d="M81.27,67.27A14.22,14.22,0,1,0,95.2,81.82,14.22,14.22,0,0,0,81.27,67.27Z"/>
<path class="cls-1" d="M81,0a81,81,0,1,0,81,81A81,81,0,0,0,81,0ZM33.21,48.71c0-.12.05-0.24,0.07-0.36,0.18-1.24.26-2.51,0.54-3.73a11.37,11.37,0,0,1,4-6.61,8.59,8.59,0,0,1,3.37-1.67v20H45c0-.11,0-0.22,0-0.33q0-5.31.05-10.62c0-3.3,0-6.61,0-9.91,0-.35,0-0.7,0-1a0.38,0.38,0,0,1,.16-0.29c0.81-.26,1.62-0.49,2.48-0.75l0.26,23h3.67c0-.41,0-0.81,0-1.21q0-3.95,0-7.89c0-2,0-3.92,0-5.88q0-4.34,0-8.69h2.6c0,0.1,0,.2,0,0.29q0,6.15.05,12.3,0,5.33,0,10.66c0,0.18,0,.35,0,0.56l3.71-.17V32.79l1.43-.12H99.65a2.94,2.94,0,0,0,.44.07l9,0a21.94,21.94,0,0,1,4.68.32,17.86,17.86,0,0,1,11.7,8,20.16,20.16,0,0,1,3.26,11.52c-0.07,3.19-.09,6.38-0.13,9.57,0,0.71-.05,1.41-0.08,2.15H98.47A1.13,1.13,0,0,1,97.8,64a33.43,33.43,0,0,0-5.48-3.78A23,23,0,0,0,78,57.47a27.71,27.71,0,0,0-14,6.35,1.68,1.68,0,0,1-1.22.46c-3.2-.1-6.4-0.16-9.61-0.24L41,63.76l-7.8-.18V48.71ZM99.78,81.5A18.79,18.79,0,1,1,81.13,62.69,18.78,18.78,0,0,1,99.78,81.5Zm28.43,34.44a16.76,16.76,0,0,1-4.94,9,16,16,0,0,1-11,4.35q-30.57,0-61.15,0a28.38,28.38,0,0,1-4.71-.41,14.85,14.85,0,0,1-8.49-4.4,17.27,17.27,0,0,1-4.35-9.06c-0.14-.74-0.23-1.48-0.34-2.23V67.69H60.76l-0.38.47-0.32.39a18.21,18.21,0,0,0-3.33,9A32.38,32.38,0,0,0,56.67,85a19.33,19.33,0,0,0,.6,3.72,25.09,25.09,0,0,0,3.58,7.18c4.81,6.73,11.43,10,19.62,10.28a22.59,22.59,0,0,0,5.65-.73,24,24,0,0,0,14.42-9.15A23.5,23.5,0,0,0,105.48,81a25.19,25.19,0,0,0-4.31-13,2.18,2.18,0,0,1-.12-0.26h27.74v0.6q0,21.08,0,42.16A24.67,24.67,0,0,1,128.2,115.94Z"/>
</svg>


Open your SVG inside i.e: Illustrator
Select your shape and go to Object → Expand.
Save again as SVG.
https://jsbin.com/pononul/1/edit?html,css,output
For the CSS stuff you could do simply:
img.social{
border-radius:50%;
transition: 0.3s;
}
img.social:hover{
background: orange;
}
<img class="social" src="http://www.weegeeg.com/insta.svg" title="Instagram">

Related

Applying a backdrop-filter: blur(); to an SVG path

I am trying to recreate an effect in CSS using an SVG. We have text saved as an SVG and needing to blur the backdrop behind the text only.
I know this is possible with block <div> elements by applying a css style of backdrop-filter: blur(10px);, but I am unable to get the same effect with SVG paths.
This is the desired effect
Here is a snippet of the SVG
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1040.474px" height="209.154px" viewBox="0 0 1040.474 209.154"
enable-background="new 0 0 1040.474 209.154"
xml:space="preserve">
<g opacity="0.4">
<path fill="#FFFFFF" d="M6.336,27.021h78.367v6.485l-20.269,2.433l53.506,134.573l33.778-84.852l-20.267-49.721l-19.998-2.433
v-6.485h78.365v6.485l-21.348,2.433l53.504,134.573l47.561-129.979l-23.781-7.026v-6.485h56.478v6.485l-20.538,7.298
l-63.233,168.35h-16.213l-44.586-108.631l 43.236,108.631H98.212L27.145,35.939L6.336,33.507V27.021z"/>
</g>
</svg>
How can you blur the backdrop behind the letters only?

using clipPath SVG and clipping a duplicate img with the blur filter will get you something like this:
body {
margin 10px;
}
.clipped {
position: absolute;
top: 10px;
left: 10px;
clip-path: url(#svgTextPath);
filter: blur(10px);
}
<img src="https://picsum.photos/id/99/500/300">
<img class="clipped" src="https://picsum.photos/id/99/500/300">
<svg height="0" width="0">
<defs>
<clipPath id="svgTextPath">
<text x="50" y="200" textLength="400px" font-family="Vollkorn" font-size="200px" font-weight="700"> Text </text>
</clipPath>
</defs>
</svg>

How to reference different SVGs inside the same SVG file in CSS background?

I am creating a website and a very important requirement of this website is to have a minimal number of files. One place where I can reduce the number of files are the SVG files of the project. Currently this project is using 10+ SVG files and I hope to combine them all into one SVG sprite sheet. Since these SVG files were being used as background images in CSS:
.class-name {
background-image: url(/path/to/file.svg)
}
I now have an svg file, where each one of the previous SVG files is a symbol, so the svg file looks like this:
<svg>
<symbol id="id1">....</svg>
<symbol id="id2">....</svg>
<symbol id="id3">....</svg>
...
</svg>
I wish to use these symbols in my CSS as follows:
.class-name {
background-image: url(/path/to/combined-file.svg#id1)
}
How can I use the SVG symbols in my background image.
I have already tried the following:
.class-name {
background-image: url(/path/to/combined-file.svg#id1)
}
and also
.class-name {
background-image: url("data:image/svg+xml;base64,<svg><use xlink:href="path/to/combined-svg#id1/></svg>"");
}
I have also tried converting all the <symbol> tags to <g> tags but then all the images start to overlap each other and therefore it becomes pointless.
I am hoping for a solution where all my SVG are in one file and i can reference them individually in my CSS background image.

This is an example where I'm using svg sprites as background:
div{width:300px;height:300px; border:1px solid;
background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#redcat);
background-size:200px;
background-repeat: no-repeat;
background-position: center;
}
<div></div>
You can also use the #blackcat
The combined file looks like this:
(Please observe the style element where this rule svg > svg:not(:target) {display: none;} is hiding all the nested svg elements unless they are the target)
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px" viewBox="0 0 225 225">
<style type="text/css">
<![CDATA[
/* this is hiding all the nested svg elements unless they are the target*/
svg > svg:not(:target) {
display: none;
}
]]>
</style>
<desc>
<g id="cat">
<path id="body" fill-rule="evenodd" clip-rule="evenodd" d="M121.506,108.953.....108.953z"/>
<path id="head" fill-rule="evenodd" clip-rule="evenodd" d="M129.747,18.651......81.453z"/>
</g>
</desc>
<svg version="1.1" id="blackcat" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 225 225">
<use xlink:href ="#cat" fill="black" />
</svg>
<svg version="1.1" id="redcat" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 225 225">
<use xlink:href ="#cat" fill="red" />
</svg>
</svg>
I hope this is what you need.
You will find this explained in detail in this book: Using SVG with CSS3 and HTML5: Vector Graphics for Web Design

How to make .svg transparent area NOT clickable

I'm trying to set an .svg image as a button. Only problem is that i'm able to click not only in the painted are, but the transparency aswell. This i need to disable so i can only click on the painted are.
Below i provide the html code i've got so far (basically what i copied from the actual file. To clarify, i exported this image from Adobe Illustrator on a windows machine.
I haven't made any modifications through .css yet.
<div id="brand"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 106"><defs><style>.cls-1{fill:#ff7800;}</style></defs><path class="cls-1" d="M67.78,52.28a5.58,5.58,0,0,0-6,0,6,6,0,0,0-2.11,2.45,9.11,9.11,0,0,0,0,7.42,6,6,0,0,0,2.11,2.45,5.58,5.58,0,0,0,6,0,6.05,6.05,0,0,0,2.11-2.45,9.11,9.11,0,0,0,0-7.42A6.05,6.05,0,0,0,67.78,52.28Z"/><path class="cls-1" d="M53,0a53,53,0,1,0,53,53A53.06,53.06,0,0,0,53,0ZM77.67,78.67a10,10,0,0,1-4.3.91A13.53,13.53,0,0,1,69.14,79a12.7,12.7,0,0,1-3.74-2.09,34.09,34.09,0,0,1-4.26-4.15A13.74,13.74,0,0,1,55.34,70a14.09,14.09,0,0,1-3.91-5A15,15,0,0,1,50,58.44L50,45.66,43.86,55.92H39.69L33.61,46.1V58.44H25v-28h7.77L41.9,45.34,50.79,30.4h7.77L58.6,45a15.72,15.72,0,0,1,6.2-1.21,15.38,15.38,0,0,1,7.6,1.88,13.68,13.68,0,0,1,5.27,5.24,15,15,0,0,1,1.91,7.56A14.78,14.78,0,0,1,77.3,66.6a13.64,13.64,0,0,1-6.17,5.24,3.52,3.52,0,0,0,1.14.9,3.13,3.13,0,0,0,1.29.26,4.94,4.94,0,0,0,3.63-1.81L81,76A9,9,0,0,1,77.67,78.67Z"/></svg></div>

You can move the <a href="index.html"> into your SVG code, so that only the <path> elements are linked instead of the whole image:
<div id="brand">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 106">
<defs><style>.cls-1{fill:#ff7800;}</style></defs>
<a href="index.html">
<path class="cls-1" d="M67.78,52.28a5.58,5.58,0,0,0-6,0,6,6,0,0,0-2.11,2.45,9.11,9.11,0,0,0,0,7.42,6,6,0,0,0,2.11,2.45,5.58,5.58,0,0,0,6,0,6.05,6.05,0,0,0,2.11-2.45,9.11,9.11,0,0,0,0-7.42A6.05,6.05,0,0,0,67.78,52.28Z"/>
<path class="cls-1" d="M53,0a53,53,0,1,0,53,53A53.06,53.06,0,0,0,53,0ZM77.67,78.67a10,10,0,0,1-4.3.91A13.53,13.53,0,0,1,69.14,79a12.7,12.7,0,0,1-3.74-2.09,34.09,34.09,0,0,1-4.26-4.15A13.74,13.74,0,0,1,55.34,70a14.09,14.09,0,0,1-3.91-5A15,15,0,0,1,50,58.44L50,45.66,43.86,55.92H39.69L33.61,46.1V58.44H25v-28h7.77L41.9,45.34,50.79,30.4h7.77L58.6,45a15.72,15.72,0,0,1,6.2-1.21,15.38,15.38,0,0,1,7.6,1.88,13.68,13.68,0,0,1,5.27,5.24,15,15,0,0,1,1.91,7.56A14.78,14.78,0,0,1,77.3,66.6a13.64,13.64,0,0,1-6.17,5.24,3.52,3.52,0,0,0,1.14.9,3.13,3.13,0,0,0,1.29.26,4.94,4.94,0,0,0,3.63-1.81L81,76A9,9,0,0,1,77.67,78.67Z"/>
</a>
</svg>
</div>
The ability to just use <a href> as-is inside an SVG image was a relatively recent introduction. If you need to support older browsers, you may need to include the xlink namespace:
<div id="brand">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 106 106">
<defs><style>.cls-1{fill:#ff7800;}</style></defs>
<a xlink:href="index.html">
<path class="cls-1" d="M67.78,52.28a5.58,5.58,0,0,0-6,0,6,6,0,0,0-2.11,2.45,9.11,9.11,0,0,0,0,7.42,6,6,0,0,0,2.11,2.45,5.58,5.58,0,0,0,6,0,6.05,6.05,0,0,0,2.11-2.45,9.11,9.11,0,0,0,0-7.42A6.05,6.05,0,0,0,67.78,52.28Z"/>
<path class="cls-1" d="M53,0a53,53,0,1,0,53,53A53.06,53.06,0,0,0,53,0ZM77.67,78.67a10,10,0,0,1-4.3.91A13.53,13.53,0,0,1,69.14,79a12.7,12.7,0,0,1-3.74-2.09,34.09,34.09,0,0,1-4.26-4.15A13.74,13.74,0,0,1,55.34,70a14.09,14.09,0,0,1-3.91-5A15,15,0,0,1,50,58.44L50,45.66,43.86,55.92H39.69L33.61,46.1V58.44H25v-28h7.77L41.9,45.34,50.79,30.4h7.77L58.6,45a15.72,15.72,0,0,1,6.2-1.21,15.38,15.38,0,0,1,7.6,1.88,13.68,13.68,0,0,1,5.27,5.24,15,15,0,0,1,1.91,7.56A14.78,14.78,0,0,1,77.3,66.6a13.64,13.64,0,0,1-6.17,5.24,3.52,3.52,0,0,0,1.14.9,3.13,3.13,0,0,0,1.29.26,4.94,4.94,0,0,0,3.63-1.81L81,76A9,9,0,0,1,77.67,78.67Z"/>
</a>
</svg>
</div>
Edit I just tested this, it seems the most recent version of Safari on both iOS and OS X does not support the basic href version, they only support the xlink:href variant. With just href Safari on iOS will make the whole image clickable (which is what you're trying to avoid), on OS X the image will not be clickable at all.

Since your image is a circle you can apply border-radius: 50% and overflow: hidden to the a element in this specific scenario.
a {
border-radius: 50%;
display: block;
overflow: hidden;
}
a svg {
display: block;
}
<a href="index.html">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 106">
<defs>
<style>.cls-1 {fill: #FF7800;}</style>
</defs>
<path class="cls-1" d="M67.78,52.28a5.58,5.58,0,0,0-6,0,6,6,0,0,0-2.11,2.45,9.11,9.11,0,0,0,0,7.42,6,6,0,0,0,2.11,2.45,5.58,5.58,0,0,0,6,0,6.05,6.05,0,0,0,2.11-2.45,9.11,9.11,0,0,0,0-7.42A6.05,6.05,0,0,0,67.78,52.28Z"/>
<path class="cls-1" d="M53,0a53,53,0,1,0,53,53A53.06,53.06,0,0,0,53,0ZM77.67,78.67a10,10,0,0,1-4.3.91A13.53,13.53,0,0,1,69.14,79a12.7,12.7,0,0,1-3.74-2.09,34.09,34.09,0,0,1-4.26-4.15A13.74,13.74,0,0,1,55.34,70a14.09,14.09,0,0,1-3.91-5A15,15,0,0,1,50,58.44L50,45.66,43.86,55.92H39.69L33.61,46.1V58.44H25v-28h7.77L41.9,45.34,50.79,30.4h7.77L58.6,45a15.72,15.72,0,0,1,6.2-1.21,15.38,15.38,0,0,1,7.6,1.88,13.68,13.68,0,0,1,5.27,5.24,15,15,0,0,1,1.91,7.56A14.78,14.78,0,0,1,77.3,66.6a13.64,13.64,0,0,1-6.17,5.24,3.52,3.52,0,0,0,1.14.9,3.13,3.13,0,0,0,1.29.26,4.94,4.94,0,0,0,3.63-1.81L81,76A9,9,0,0,1,77.67,78.67Z"/>
</svg>
</a>

How to make angled SVGs interlock

I currently have two SVGs that were designed to interlock with eachother but the higher SVG (The first in the imgur link) acts as if it were a rectangle and "pushes" the lower SVG (The second picture in the imgur link) down away from it and they end up with a large space between them (The third imgur link). I have only changed the width of the second SVG in the code so far. Without manually aligning them, which would ruin my page's responsiveness, is there a way to give the SVG a smaller hitbox or similar?
https://imgur.com/a/YtBuso4
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1250">
<defs>
<style>
.cls-1 {
fill: #190eae;
}
</style>
</defs>
<path id="bali-beautiful-beauty-433539" class="cls-1" d="M0,0H1920V1080L0,1250Z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 1080.021" id="sectiona">
<defs>
<style>
.cls-1 {
opacity: 0.7;
}
</style>
</defs>
<g id="Group_78" data-name="Group 78" transform="translate(-488 -3248.979)">
<path id="Path_26" data-name="Path 26" class="cls-1" d="M-1-16.511l960-85.021V978.489l-960-85Z" transform="translate(489 3350.511)"/>
</g>
</svg>
Thank you

I think the most simple solution to your problem is to lessen the viewBox height of the first <svg>, but to show the overflow. That way, the triangular form at the bottom will "slip" under the second <svg>
svg {
overflow:visible;
display:block;
}
.cls-1 {
fill: #190eae;
}
.cls-2 {
opacity: 0.7;
}
<svg id="svg-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080">
<path id="bali-beautiful-beauty-433539" class="cls-1" d="M0,0H1920V1080L0,1250Z"/>
</svg>
<svg id="svg-bottom" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 1080.021" id="sectiona">
<g id="Group_78" data-name="Group 78" transform="translate(-488 -3248.979)">
<path id="Path_26" data-name="Path 26" class="cls-2" d="M-1-16.511l960-85.021V978.489l-960-85Z" transform="translate(489 3350.511)"/>
</g>
</svg>
Note how I have moved the styles outside the SVGs. They are part of the same DOM anyway, and if both quote the same class name, both styles will be applied to both paths. I've changed the class name for one of them, so that does not happen.
Another issue is that <svg> elements in HTML are inline-blocks. As such they have a line height, and if they are displayed one below the other (as happens here because their default width is 100%), that may lead to a small visible gap between their layout boxes. Setting display:block solves that.

How do I Display a .svg Icon Without it Getting Clipped?

I am trying to display these social media icons on my website in such a way that I can change the color using css (so i can add the hover effect shown in the code below).
However, since these are vector image files (.svg) I couldn't seem to find a way to insert the image into my web page using the conventional <img src=""> method. So I proceeded to create CSS classes to get the image to appear as a CSS mask (thus allowing me to change the color via CSS).
However, I quickly noticed that the sides of the otherwise circular vector graphic icons were slightly cutoff. Being the perfectionist that I am, I wanted to make the icons actually appear round as they were supposed to. So, after checking out the webkit-mask MSDN entry I increased the width of the .media-buttons class and used -webkit-mask-position to shift the image a few pixels down and to the left as is evident in my code below. This obviously did not work.
It has also come to my attention that -webkit-mask is not fully supported by all browsers.
CSS:
#cross{-webkit-mask: url("http://path/to/image.svg") no-repeat;}
.media-buttons {
width: 202px;
height: 202px;
background: #000;
-webkit-mask-position: 10px 10px;
}
.media-buttons:hover {background: rgb(94, 176, 201);}
HTML:
<img class="media-buttons" id="cross">
TL;DR, I am looking for a (possibly new) way to display my .svg icons that has somewhat decent browser support and the ability to manipulate the icon's color via CSS.

Here's one way:
svg:hover {
color: #009BCD;
}
p {
color: green;
}
<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" display="none">
<title>Cross</title>
<description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M100,0 C44.771524,3.03201907e-14 0,44.771524 0,100 C0,155.228476 44.771524,200 100,200 C155.228476,200 200,155.228476 200,100 C200,44.771524 155.228476,-3.41060513e-14 100,0 Z M84.0763011,40 L115.923699,40 L115.923699,84.1405714 L160,84.1405714 L160,116.034408 L115.923699,116.034408 L115.923699,160.16875 L84.0763011,160.16875 L84.0763011,116.034408 L40,116.034408 L40,84.1405714 L84.0763011,84.1405714 L84.0763011,40 Z" id="Cross" fill="currentColor" sketch:type="MSShapeGroup"></path>
</g>
</svg>
<p>
Heh! What's this
<svg width="1em" height="1em" viewBox="0 0 200 200">
<use xlink:href="#Cross"/>
</svg>
doing in the middle of a sentence?
</p>
<svg width="50px" height="50px" viewBox="0 0 200 200">
<use xlink:href="#Cross"/>
</svg>
What I did here was:
Copy the SVG into the HTML (and removed the XML preamble)
Set display="none" on the <svg> so that it is invisible on the page.
Changed the fill on the icons <path> element to currentColor
Now every time you want a copy of the icon to appear, create a mini-svg that reverences the <path> in the first SVG.
<svg width="50px" height="50px" viewBox="0 0 200 200">
<use xlink:href="#Cross"/>
</svg>
Just set it's size with the width and height values. You just need to include each icon once and you can reference them as many times as you like.
What is currentColor for?
currentColor is a special color value in SVGs that tells the elements to use the value of the current color setting. It means you can set the color outside the <use> element and it gets inherited by whatever the <use> is referencing. Normally you can't style each of the icon references individually. They would all be stuck having whatever fill the original <path> is set to.
Using just the original SVG
svg path {
fill: blue;
}
svg:hover path {
fill: #009BCD;
}
<p>SVG just used as is</p>
<svg width="100px" height="100px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>Cross</title>
<description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd" sketch:type="MSPage">
<path d="M100,0 C44.771524,3.03201907e-14 0,44.771524 0,100 C0,155.228476 44.771524,200 100,200 C155.228476,200 200,155.228476 200,100 C200,44.771524 155.228476,-3.41060513e-14 100,0 Z M84.0763011,40 L115.923699,40 L115.923699,84.1405714 L160,84.1405714 L160,116.034408 L115.923699,116.034408 L115.923699,160.16875 L84.0763011,160.16875 L84.0763011,116.034408 L40,116.034408 L40,84.1405714 L84.0763011,84.1405714 L84.0763011,40 Z" id="Cross" sketch:type="MSShapeGroup"></path>
</g>
</svg>

I can't tell for sure where this bug is coming from but I think it has something to do with borders. Add a 1px border and you'll see some really weird behaviour. Now to answer your question: To make sure your image doesn't get clipped you can use mask-size. E.g. -webkit-mask-size: 50% 50%;
Just don't think masks are ready for primetime just yet.
Here's a pen that demonstrates this: http://codepen.io/anon/pen/ONLRbZ