SVG <view> bug in macOS Safari - css
I'm trying to create an SVG sprite that can be used both as bg and as inline svg via .
The following SVG mostly works:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<!-- symbols: used for inline SVGs via <use> -->
<symbol id="tsg-en-logo" viewBox="0 0 100 11.1">
<path fill="#0CA8D0" d="M0,2h1..."/>
</symbol>
<symbol id="chevron-down" viewBox="0 0 200 123.9">
<g fill="#0CA8D0">
<path d="M49..."/>
</g>
</symbol>
<!-- views: used for bg images -->
<view xmlns="http://www.w3.org/2000/svg" id="tsg-en-logo-bg" width="100" height="11.1" viewBox="0 0 100 11.1"/>
<view xmlns="http://www.w3.org/2000/svg" id="chevron-down-bg" width="200" height="123.9" viewBox="0 12 200 123.9"/>
<!-- uses: shown when acceses directly on the browser -->
<use xlink:href="#tsg-en-logo" x="0" y="0" width="100" height="11.1" id="u-tsg-en-logo"></use>
<use xlink:href="#chevron-down" x="0" y="12" width="200" height="123.9" id="u-chevron-down"></use>
</svg>
The problem is that when used as a BG, macOS Safari looses the proportions.
See full SVG here: https://cdn.rawgit.com/42pe/7a3a0193d3a142e7d93601340e6ee8fc/raw/81a7b0598b7179bdc071bba87569d53e2a7651e7/test.svg
And working fiddle: https://jsfiddle.net/42pe/Lragjqef/1/
Any idea why or how to fix? This works fine on Chrome, Firefox, IE11 and Edge!
Related
Svg clip-path not working on iOS (chrome, safari and firefox)
I am using svg clip-path in react, it works fine in google chrome, firefox on Desktop and Android but not safari (iOS and Desktop) and google chrome (on iOS).
This is my code:
<svg
viewBox="0 0 224 224"
fill="none"
xmlns="http://www.w3.org/2000/svg"
ref={svgRef}
className={classNames("rounded-full", className)}
style={{ clipPath: "url(#clipPath)", WebkitClipPath: "url(#clipPath)" }}
>
<defs>
<clipPath id="clipPath">
<path d={path} />
</clipPath>
</defs>
<path d={path} fill={colors.lightGray} className="mix-blend-darken" />
</svg>
The svg element has a conic-gradient
This is the working result
This the non working result (iOS and Safari)
I finally found the solution:
I had to apply the clipPath to a div containing the svg element, the final code :
<div className={classNames("rounded-full", className)} style={{ clipPath: "url(#clipPath)" }}>
<svg viewBox="0 0 224 224" fill="none" xmlns="http://www.w3.org/2000/svg" ref={svgRef}>
<defs>
<clipPath id="clipPath">
<path d={path} />
</clipPath>
</defs>
<path d={path} fill={colors.lightGray} className="mix-blend-darken" />
</svg>
</div>
clip-path url fails to find id
I have an SVG that I am trying to use to clip a div, but the id I give to the <clipPath> tag does not work. I have tried changing the ID, and have made sure that the SVG does indeed exist in the same file, and the ID is visible. The svg is like so: <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 149.559"> <defs> <clipPath id="clipper"> <g id="svgg" stroke="none" fill-rule="evenodd"> <path id="path0" d= .../> <path id="path1" d= .../> <path id="path2" d= .../> <path id="path3" d= .../> <path id="path4" d= .../> </g> </clipPath> </defs> </svg> I added the <defs> and <clipPath> tag so I could use the svg I had as a clipping mask. The html element being used is: <div class="logo-bg" style="clipPath: url(#clipper)"></div> the div does have a width and height. Within developer tools, the css property of the div I am trying to clip with clip-path: url(#clip-id) shows "could not load the image". Ideally I would be able to clip the div with the SVG. here's the code I am working with: https://jsfiddle.net/mzLtsqva/6/ I am new to working with SVGs and so would appreciate any help to solve this issue.
Inside the <clipPath> don't wrap the paths in a group element.
In the next example I'm using a clipping path that is not working: #no and one that is working: #yes. In the one that is not working I'm wrapping the elements inside in a <g> element.
svg{border:1px solid;}
<svg width="250" height="250" viewBox="0 0 250 250" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<rect id="rect" x ="0" y ="0" height ="150" width ="70" style ="stroke:#000;" transform="translate(90, 50)"/>
<clipPath id="no">
<g>
<use xlink:href="#rect" fill="none"></use>
<use xlink:href="#rect" fill="none" transform="rotate(60 125 125)"></use>
<use xlink:href="#rect" fill="none" transform="rotate(-60 125 125)"></use>
</g>
</clipPath>
</defs>
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" height="250" width="250" x="-15" y ="50" clip-path="url(#no)"></image>
</svg>
<svg width="250" height="250" viewBox="0 0 250 250" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="yes">
<use xlink:href="#rect" fill="none"></use>
<use xlink:href="#rect" fill="none" transform="rotate(60 125 125)"></use>
<use xlink:href="#rect" fill="none" transform="rotate(-60 125 125)"></use>
</clipPath>
</defs>
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" height="250" width="250" x="-15" y ="50" clip-path="url(#yes)"></image>
</svg>
Why is my SVG image squeezed in IE11?
I'm using SVG image files with <img> tag. The image looks fine in all browsers except for IE11.
How it should look:
How it looks in IE11:
The CSS is set to width:42px; height:auto. I've tried fiddling with viewbox and height and width of the SVG itself, but nothing seems to help.
This is the code:
.st0{
fill:#7F7F7F;
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" x="0px" y="0px"
viewBox="0 0 40 40" xml:space="preserve">
<g id="_x33_A4Pmf.tif_1_">
<g>
<path class="st0" d="M38,23.3c0,0.3,0,0.6,0,0.9c0,0,0,0.1,0,0.1c0,0.3-0.1,0.6-0.1,1c-0.2,1.5-0.8,2.8-1.7,4
c-1.4,1.8-3.2,2.9-5.3,3.3c-0.7,0.1-1.4,0.2-2.1,0.2c-5.8,0-11.7,0-17.5,0c-0.6,0-1.2,0-1.7-0.1c-1.1-0.2-2.1-0.6-3.1-1.2
c-1.2-0.7-2.2-1.7-3-2.9c-0.7-1.1-1.1-2.3-1.3-3.6c0-0.2,0-0.4-0.1-0.6c0-0.3,0-0.6,0-0.9c0-0.1,0-0.3,0-0.4
c0.1-1,0.3-1.9,0.7-2.8c0.4-1,1-1.8,1.7-2.6C5.2,16.8,6,16.2,7,15.7c0.1,0,0.1-0.1,0.1-0.2c0.5-1.6,1.4-3.1,2.5-4.4
c1-1.1,2.1-2,3.4-2.6c1.4-0.7,2.9-1.1,4.5-1.3c0.1,0,0.3,0,0.4,0c0.4,0,0.7,0,1.1,0c0,0,0.1,0,0.1,0c0.4,0,0.8,0.1,1.1,0.1
C21.6,7.6,23,8,24.2,8.7c2.5,1.4,4.3,3.4,5.4,6c0,0.1,0.1,0.1,0.1,0.1c0.3,0,0.5,0.1,0.8,0.1c1.2,0.2,2.2,0.6,3.2,1.2
c1.2,0.8,2.2,1.7,2.9,2.9c0.7,1.1,1.1,2.3,1.3,3.6C38,22.9,38,23.1,38,23.3z M20,29.8c3,0,6,0,8.9,0c0.4,0,0.7,0,1.1-0.1
c1.3-0.2,2.4-0.8,3.3-1.7c1.3-1.4,1.9-3.1,1.7-5c-0.2-1.3-0.7-2.4-1.6-3.3c-0.9-1-2.1-1.6-3.4-1.8c-0.4-0.1-0.8-0.1-1.2-0.1
c-0.4,0.1-0.8,0.1-1.2,0.1c-0.1,0-0.1,0-0.1-0.1c-0.1-0.4-0.2-0.8-0.4-1.2c-0.6-1.9-1.6-3.4-3.2-4.6c-2-1.5-4.3-2.1-6.8-1.7
c-1.5,0.2-2.9,0.8-4.2,1.8c-1.4,1.1-2.4,2.4-2.9,4c-0.2,0.5-0.3,1.1-0.5,1.6c0,0.1-0.1,0.1-0.1,0.2c-0.3,0.1-0.6,0.2-0.9,0.4
c-0.9,0.4-1.6,1-2.2,1.7C5.4,21.2,5,22.5,5,24c0.1,1.4,0.5,2.6,1.4,3.6c1.2,1.4,2.8,2.1,4.6,2.1C14,29.8,17,29.8,20,29.8z"/>
<path class="st0" d="M17,20.7c-0.9,0-1.7,0-2.6,0c1.4-1.9,2.7-3.7,4.1-5.6c1.4,1.9,2.7,3.7,4.1,5.6c-0.9,0-1.7,0-2.6,0
c0,2,0,4,0,6c-1,0-2,0-3,0C17,24.7,17,22.8,17,20.7z"/>
</g>
</g>
</svg>
I added a red box that shows the area occupied by svg
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 40 40" style="border:1px solid red;" >
Chrome
IE11
If you replace height:auto with a fixed size
svg {
width:42px;
height:42px;
}
The image will look the same in all browsers:
the second variant: add the viewport to the svg file width="40" height="40"
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="40" height="40" viewBox="0 0 40 40" style="border:1px solid red;" >
<style type="text/css">
.st0{fill:#7F7F7F;}
</style>
<g id="_x33_A4Pmf.tif_1_">
<g>
<path class="st0" d="M38,23.3c0,0.3,0,0.6,0,0.9c0,0,0,0.1,0,0.1c0,0.3-0.1,0.6-0.1,1c-0.2,1.5-0.8,2.8-1.7,4
c-1.4,1.8-3.2,2.9-5.3,3.3c-0.7,0.1-1.4,0.2-2.1,0.2c-5.8,0-11.7,0-17.5,0c-0.6,0-1.2,0-1.7-0.1c-1.1-0.2-2.1-0.6-3.1-1.2
c-1.2-0.7-2.2-1.7-3-2.9c-0.7-1.1-1.1-2.3-1.3-3.6c0-0.2,0-0.4-0.1-0.6c0-0.3,0-0.6,0-0.9c0-0.1,0-0.3,0-0.4
c0.1-1,0.3-1.9,0.7-2.8c0.4-1,1-1.8,1.7-2.6C5.2,16.8,6,16.2,7,15.7c0.1,0,0.1-0.1,0.1-0.2c0.5-1.6,1.4-3.1,2.5-4.4
c1-1.1,2.1-2,3.4-2.6c1.4-0.7,2.9-1.1,4.5-1.3c0.1,0,0.3,0,0.4,0c0.4,0,0.7,0,1.1,0c0,0,0.1,0,0.1,0c0.4,0,0.8,0.1,1.1,0.1
C21.6,7.6,23,8,24.2,8.7c2.5,1.4,4.3,3.4,5.4,6c0,0.1,0.1,0.1,0.1,0.1c0.3,0,0.5,0.1,0.8,0.1c1.2,0.2,2.2,0.6,3.2,1.2
c1.2,0.8,2.2,1.7,2.9,2.9c0.7,1.1,1.1,2.3,1.3,3.6C38,22.9,38,23.1,38,23.3z M20,29.8c3,0,6,0,8.9,0c0.4,0,0.7,0,1.1-0.1
c1.3-0.2,2.4-0.8,3.3-1.7c1.3-1.4,1.9-3.1,1.7-5c-0.2-1.3-0.7-2.4-1.6-3.3c-0.9-1-2.1-1.6-3.4-1.8c-0.4-0.1-0.8-0.1-1.2-0.1
c-0.4,0.1-0.8,0.1-1.2,0.1c-0.1,0-0.1,0-0.1-0.1c-0.1-0.4-0.2-0.8-0.4-1.2c-0.6-1.9-1.6-3.4-3.2-4.6c-2-1.5-4.3-2.1-6.8-1.7
c-1.5,0.2-2.9,0.8-4.2,1.8c-1.4,1.1-2.4,2.4-2.9,4c-0.2,0.5-0.3,1.1-0.5,1.6c0,0.1-0.1,0.1-0.1,0.2c-0.3,0.1-0.6,0.2-0.9,0.4
c-0.9,0.4-1.6,1-2.2,1.7C5.4,21.2,5,22.5,5,24c0.1,1.4,0.5,2.6,1.4,3.6c1.2,1.4,2.8,2.1,4.6,2.1C14,29.8,17,29.8,20,29.8z"/>
<path class="st0" d="M17,20.7c-0.9,0-1.7,0-2.6,0c1.4-1.9,2.7-3.7,4.1-5.6c1.4,1.9,2.7,3.7,4.1,5.6c-0.9,0-1.7,0-2.6,0
c0,2,0,4,0,6c-1,0-2,0-3,0C17,24.7,17,22.8,17,20.7z"/>
</g>
</g>
</svg>
The third variant
If you want to leave css rule - height: auto; for the block, then add "preserveAspectRatio"
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 40 40" preserveAspectRatio="xMinYMin meet" >
<style type="text/css">
.st0{fill:#7F7F7F;}
svg {
width:42px;
height:auto;
}
How to Use CSS Mask in IE and Mozilla
I came across this CSS property for IE and Mozilla
I intend to mask an HTML element but I can't seem to work it. Please I need your help, this is my code
.download {
mask: url(image/download.svg#Capa_1);
-webkit-mask: url("image/download.svg") top left / cover;}
and this is my SVG file
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path d="M256,288l128-128h-96V32h-64v128h-96L256,288z M372.363,235.636l-35.87,35.871L466.533,320L256,398.509L45.467,320
l130.04-48.493l-35.871-35.871L0,288v128l256,96l256-96V288L372.363,235.636z"/>
</svg>
Use SVG for the content and the mask. For example: <svg> <defs> <mask id="mask1" x="0" y="0" width="1000" height="1000" > <rect x="0" y="0" width="1000" height="1000" style="stroke:none; fill: #999999"/> </mask> </defs> <rect x="1" y="1" width="100" height="100" style="stroke: none; fill: #000000; mask: url(#mask1)"/> </svg> References SVG Masks
Turn off anti-aliasing on svg when applying CSS3:Zoom on the element?
I found that when the CSS3 Zoom is applied on small SVG icons (9px:9px with zoom: 1.5), the SVG icons could be blurry. Any idea to get a sharp and clean icon in this case? Thanks in advance. The SVG: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" x="0px" y="0px" width="9px" height="9px" viewBox="0 0 9 9" enable-background="new 0 0 9 9"> <g> <g fill="none" transform="translate(0.5, 0.5)"> <g stroke="#000000" stroke-width="0.5" stroke-linecap="square" > <line x1="2" y1="4" x2="6" y2="4"/> <line x1="4" y1="2" x2="4" y2="6"/> </g> <g stroke="#909090" stroke-width="1" stroke-linecap="square" > <rect x="0" y="0" width="8" height="8"/> </g> </g> </g> </svg>
Got a solution myself. The trick is adding: shape-rendering="crispEdges" to the SVG elements. From Mozilla MDN: crispEdges Indicates that the user agent shall attempt to emphasize the contrast between clean edges of artwork over rendering speed and geometric precision. To achieve crisp edges, the user agent might turn off anti-aliasing for all lines and curves or possibly just for straight lines which are close to vertical or horizontal. Also, the user agent might adjust line positions and line widths to align edges with device pixels. See the difference on jsFilddle.