Please consider we have simple SVG file, containing code for rounded rectangle which corner radius equals 10:
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<rect fill="#FACE8D" x="0" y="0" width="100" height="100" rx="10" ry="10" />
</svg>
Here how it looks like in Chrome:
Now we use this image as a value for border-image property in CSS:
.box {
#include border-image(url('rounded-rectangle.svg') 10);
border-width: 10px;
background: #FFF;
width: 50px;
height: 50px;
}
Now let's take a look on how it looks like in different browsers and devices: brilliant, the image stretched across element's boundaries as expected.
However, when we end up viewing those on devices with retina screens, we've got some total crap: SVG seems to be grown twice. All we see is one enormous corner.
If we replace that SVG with a similar PNG, everything is fine. Take a look (iOS 5.1 painted the inner parts of elements with the image color for some reason, however, this is not a subject of this question):
Live demo
The question is: can this be dealt with? Maybe, I've got some wrong SVG? Or I need to set the viewport meta-tag with some tricky stuff to stop border-image from scaling?
The problem is quite important. First of all, SVG is being popular mostly because of retinas. It is the tool to decorate things without being worried they would look like crap on doubled pixels.
Secondly, the mechanics and syntax of the border-image property is quite similar to the -webkit-mask-box-image proprietary property, using which is still the only way to round corners of blocks which contain absolutely positioned children (for example, Google Maps v3 can be rounded in Chromes and Safaries only through it). And this property is very valuable in mobile development with web components, when we need to set some tricky contour to an UI element. Sadly, by this property doubles it's SVG dimensions just like border-image.
UPDATE. Seems that this issue may be caused by updated SVG processor introduced in iOS 6.0: on retina SVG dimensions are computed in CSS pixels, while the coordinates are computed in retina ones. There are some bugs tracked that have something similar with my issue.
Given your update about iOS6 bugs, this approach might work:
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<rect fill="#FACE8D" x="0" y="0" width="100%" height="100%" rx="10%" ry="10%" />
</svg>
Forget images you can do this with simple css
.box {
border: 10px solid #FACE8D;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #FFF;
width: 50px;
height: 50px;
}
Supported since iOS 3.2 ... http://caniuse.com/border-radius
If you need an image in order for the border to have a pattern, you can simply use a web format image without transparency and use border-radius on that
Related
I have been developing a web page "game" on my PC based in HTML, SVG, and Javascript. It has a large image of the earth loaded into the SVG views through the SVG <image> tag. Testing on my PC this works with no problem, however recently I published it to a public web page (http://rbarryyoung.com/EarthOrbitalSimulator.html) and discovered that only the bottom right quarter of the SVG is rendering on both SVG views on my iPhone and iPad. Like this:
At first, I thought that it was just the image in the SVG viewports, but then I realized that the entire SVG viewport was black except for the lower-right quadrant. The SVG viewport is correctly fully sized, it just appears as if there is some black mask over 3/4s of it (or only 1/4 of it renders).
Here's what I think are the relevant HTML code lines, the containing Div tag for the first SVG view (line 67):
<div id="divSvg1"
style="position:relative; z-index:1; margin:15px;
top:100px;
width:640px; height:640px;
background-color:black;
float:left;"
>
The SVG tag (line 104):
<svg id="svgEa"
style="width:100%; height:100%;"
viewBox="-7500 -7500 15000 15000"
preserveAspectRatio="xMidYMid meet"
clip-path="url(#svgEaClip)"
transform="scale(1.0,1.0)"
version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- NOTE: All internal units are in KM (or %) -->
And the embedded Image tag (starting at line 160):
<g id="gEaAll" transform="scale(1.0,1.0)" >
<!-- ... -->
<g id="gEaSurfaceFacingBottom" class="eaSurfaceFacing">
<g id=gEarthImage>
<!-- ... -->
<image x="-6413" y="-6413" width="12826" height="12826" href="eosImages/globe-arctic 8bit.png" />
</g>
</g>
The second SVG view is a shadowed (<use..> tag), zoomed view of the first with the same problem.
I have tested this on my PC, on both screens in Chrome, Edge, and IE, where it works correctly on all of them. I have also tested this on my iPhone with both Safari and Edge and my iPad with Safari, Chrome, and Edge with the same failure on all of them. I have tried just a bare <img> tag of the PNG file outside of SVG and that works fine on these platforms.
I do not have any Android platforms to test with, so if anyone wants to try it and let me know, I can add those results here.
I have researched this, and though there's a bunch of stuff about iOS not rendering images, mostly those are a complete failure to render, rather than this very specific partial rendering, and much less specific stuff about SVG differences. Ultimately I didn't find anything that seemed to be the same problem.
To summarize then, my question is: what is causing this problem or what have I done wrong, and how can I fix it? (I do understand that I will need to have a different style/CSS layout for mobile, but I still need to know what needs to be changed to make this render correctly)
Add X and Y coordinates for your <rect />. In your case, your Clip-Path Rectangle is not in an exact coordinate.
Here is the code working for me
<clipPath>
<rect x="-7500px" y="-7500px" width="100%" height="100%" />
<cliPath>
replace this code with your <clipPath> on line 114 and 301.
Here is the Screenshot
Moreover here is a live demo that worked on my Mac Safari as well in windows Chrome, where I took one part of your code.
Update
Check the answer by #fussionweb.
Orignal answer:
You can try the -webkit- prefix before clip-path. It seems to be a safari issue related to clip-path.
I have a really really weird question. Is it possible to have something like an image on your page that looks insanely small when browsing normally and you don't even notice it, but when you zoom in a lot, you can clearly see what's there. For example a smiley face that when browsing normally appears as small as a dot, but when you zoom in a lot you can clearly see it. Got this question and honestly I could not answer it, so out of curiosity i decided to ask here. A friend of mine told me that may be possible using SVG.
Yes! You could make this effect using SVG, this is the demo!
This animation mainly made using this code:
var tl = new TimelineMax();
tl.from("svg", 15, { // Start the animation from... through 15 seconds!
scale: 0, // Zero scale!
transformOrigin: '50% 50%',
ease: Back.easeOut
})
</script>
It is a concept! You could make it using any tool (aka SVG)
Well sort of. Except the problem is that browsers don't really let you zoom a page all that much. For example, Chrome's max zoom is 500%. Even if we start with a 5px "dot", zooming by 5x still doesn't let you read the microtext written on that dot.
See the demo below.
Of course I am assuming you meant browser zoom. But perhaps you meant some other sort of zoom.
div {
border: solid 1px red;
padding: 50px;
display: inline-block;
}
svg {
width: 5px;
height: 5px;
}
<div>
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50"/>
<text x="50" y="55" text-anchor="middle" font-size="20" fill="white">Secret text</text>
</svg>
</div>
of I have an SVG object placed in a container. It has the following CSS on its class.
.container{
position: relative;
}
.svgObj{
position: absolute;
top: 0;
left: 0;
width: 2em;
height: 2em;
}
So, the problem is that the svg doesn't end up in 0:0 of the container but rather more like in 200px south of that.
The queer thing is that if I substiute the SVG tag for a DIV with the same class, it displays exactly where I want it to.
The problem is only apparent in IE (only tried 11, but likely there in earlier versions as well).
Well, fwiw the problem is also visible in Minori.
Works fine in Safari, Chrome, FF, Opera, well the bigs, except IE.
Any ideas are most welcome.
The HTML code looks like so
<div class="container">
<svg class="svgObject" data-x="0" data-y="0" data-text="My Obj" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<a id="h-72417" href="#">
<path d="M12 4a8 0z"></path>
<path d="M12 4a8 0-16z"></path>
</a>
</svg>
</div>
Never mind the path values, I shortened them here to save space. It shouldn't matter. The data attributes aren't relevant either. As stated, just switching SVG for DIV and adding a "hello" instead of the paths makes it work as expected.
Thanks.
I know this is an old question, but I came across it as I was searching for an answer to this issue myself. The solution that worked for me was to add preserveAspectRatio="xMinYMin meet" to the tag. This essentially makes the SVG responsive and shifts the contents to the top left of the SVG container.
I found the answer here: http://thenewcode.com/744/Make-SVG-Responsive
Thanks for answering this ceindeg, even after the fact.
For anyone else who's having this problem, an even better solution than the preserveAspectRatio attribute is to just simply make sure you have the width and height set inside the main SVG tag. Most browsers don't need them, but IE is different (of course).
I'm trying to have a SVG graphic inside an <img /> tag that would fit (without crop) inside the tag with preserved aspect ratio. I created the SVG in Inkscape. It worked as expected on all browsers except for Internet Explorer 9.
To make it work on IE 9 I had to add the viewBox="0 0 580 220" and preserveAspectRatio="xMidYMid meet" and remove the width="580" and height="220" SVG properties.
<svg viewBox="0 0 580 220" preserveAspectRatio="xMidYMid meet">...</svg>
This seemed to work everywhere, just until I tried it on Webkit, where the <img /> tag gets stretched vertically although the aspect ratio of the SVG is indeed preserved.
When I put back the width="580" and height="220" properties, it works on Webkit but on IE 9 the aspectr ratio is lost.
Is there a cross browser solution for this behavior?
Seems like I found the solution:
You need to keep the width and height properties in the SVG.
<svg
width="580"
height="220"
viewBox="0 0 580 220"
preserveAspectRatio="xMidYMid meet"
>...</svg>
And to make it work on IE 9 you need to specify at least one dimension of the <img /> tag.
<img src="your.svg" style="width: 100%" />
This seems to be working everywhere.
I solved it by setting the following CSS to the :
width: 100%;
max-width: (desiredwidth in px)
The solution in my case was using Peter Hudec's answer, but because of using width: 100%; on the <img /> tag, which broke the layout on every non-IE9 browser, I added a IE9-only CSS hack (width: 100%\9\0;). Hope this addition will help someone. :-)
Even using the preserveAspectRatio="xMidYMid meet" was not neccessary.
(I wanted to add only a comment, and not answer, but no reputations yet to do so :-)
Just thought that I would add how I stepped into a solution. I had trouble figuring out some of the issues at first.
Edit your SVG file to remove the hard-coded height and width attributes. (with simple text editor)
Apply width:100% css to your svg image to make IE display it like other browsers. (as big as it's container)
Use css on your image container for consistent results!
I made a page to describe it in more detail at http://ivantown.com/posts/svg-scaling-with-ie/
Just an additional suggestion: Using an attribute selector based on the .svg filename suffix might be useful in cases where you need this behavior on all your svg content, and don't have control over the markup.
For example
img[src$=".svg"] {
width:100%;
}
I don't have any problems using clip-path with links to .svg files in Firefox, but Safari seemingly refuses to use them.
If you load my WIP page http://www.omakadesign.com in Firefox, you will see a butterfly pattern at the bottom of the menu, but if you load it in Safari, the menus are completely rectangular.
The relevant line appears in main.css (221) and looks like:
clip-path: url("../img/menu-news.svg#news-clip");
There seems to be very little information about clip-path and Safari, and not many questions about it on this site either (believe me I've looked). But then again, I can't even get the most basic inline svg example with clip-path to work even in Firefox, so perhaps there is something fundamental I'm missing on this topic?
(Also, though this is another subject, why these menus have both padding and margin on the bottom is a mystery to me since I zero them out using min-width...)
UPDATE:
I did a test and created a .svg with a mask tag in it and replaced the clip-path line that appears above with a css mask instead (still 221 if you want to try it with the Firefox Style Editor) and amazingly that still works in Firefox and Safari STILL skips over it:
mask: url("../img/menu-news-mask.svg#news-mask");
(Final update: Found the solution, but I'm not allowed to post it for another 5 hours... turns out, you have to use very, very specific SVG and use -webkit-mask for Safari.)
I found the solution. You have to use VERY SPECIFIC SVG code! Follow the example of this guy to the letter, and clipping will work in Safari too:
https://github.com/Modernizr/Modernizr/issues/213#issuecomment-1149691
(Sorry about posting my own answer for my own first question, but I was really desperate and I usually find that when you start asking others, that's when you stumble upon the solution...)
EDIT: Doesn't work in IE9, which I don't really care about, but just a heads up for those who do (the fallback is simply a plain rectangular menu for me which still works).
Thank you for having that link to Modernizr's github!
For a note on if you are clipping an image, what's important is the path has to be inside the clipPath.
On a side note, if you export your SVG Code from Illustrator. Just make sure to use the actual path instead of this:
<defs>
<path id="path" d="....">
</defs>
<clipPath id="clipping">
<use xlink:href="#path"/>
</clipPath>
<image clip-path=url(#clipping) ...>
to the actual path like this...
<clipPath id="clipping">
<path id="path" d="....">
</clipPath>
<image clip-path=url(#clipping) ...>
It will work in FF, Chrome, Safari, Opera and IE9 & 10.
Here's the jsfiddle
Edit
The original issue now I realized is a slightly different problem than what I had... Which is using the svg path to clip an image outside of the svg as an img tag. Unfortunately, IE, even 10 didn’t work when I tried the exact same method. Therefore, if you have have a single image, best is to embed the image inside the svg itself instead of clipping an img tag with the path. That worked for IE9&10 and then some..
For second part of your question (..why these menus have both padding and margin on the bottom..) :
main.css line 95
nav a {
background: none repeat scroll 0 0 #616161;
color: white;
display: block;
font: 12px/20px Lucida Sans Unicode,Lucida Grande,Lucida Sans;
margin-bottom: 10px;
padding: 15px 0;
text-align: center;
text-decoration: none;
}