This should be simple:
I want to use SVG images in a responsive layout. It all appears to work fine, including in IE 9+ when I've tested in Browser Stack. However, on the Can I Use website it says "IE9-11 desktop & mobile don't properly scale SVG files. Adding height, width, viewBox, and CSS rules seem to be the best workaround." I've spent hours looking into workarounds given on the internet, but being a newbie I don't understand them. And it appears to work without any workarounds! Is this code okay?
Here is my HTML:
<div class="content">
<img src="resources/test.svg">
</div>
Here is my CSS
img {width:100%;}
.content {max-width:700px; margin:0 auto;}
Thank you ever-so-much
It depends on the contents of your SVG. It should work okay as long as your SVG has a viewBox but does not specify a width or height.
See: SVG in img element proportions not respected in ie9
Related
i put iframe of Bandcamp embeded player on my website, but the background-image of my track look blurry.
i made this cover in Illustrator in 2400x2400 and i exported in Png24.. When i look the background image in Bandcamp the image seems in good quality.. i dont understand what to do to view the cover in my website in good quality.
you can see it in https://mauditemachine.com/
i tried to see what happened if i change the background-image to 1 instead of 8
<div id="art" class="item" style="background-image: url("https://f4.bcbits.com/img/a2126636077_8.jpg");"></div>
i see a better quality but i cant force it..
when i tried to change the size to 400x400 in the iframe code i have better results but i want to have 300x300 sizing.
i just change iframe parameters to select 100% for width and height.
In my Css i put width and height to 400px to a container above and for responsive design i put 300px
I’m working with an SVG on a website, and everything works fine except in Safari. Safari displays my SVG with a completely different font than what I used for the graphic.
Correct Rendering
This is how it’s supposed to display.
Safari Rendering
This is how Safari renders it.
I don’t have a lot of experience with using SVGs in web design, but I’m using CSS to set it as a background-image like I would anything. I can’t figure out what I’m doing wrong.
.titleContainer{
background-image: url(‘../img/logo.svg’)
}
This is most likely because you should "convert to outline" when you export the SVG from your design program. I could imagine that you selected to embed the font.
Ie in Adobe Illustrator you have the option to outline the font when you export:
Adobe Illustrator example
I have a problem rendering the "font-smoothing" CSS property with html2canvas on all browsers I have (FF/Chrome/Safari/0pera)
But trying desperately to solve that, I eventually wondered why I had to smooth the text in the first place and i noticed that only the fonts displayed on a dark background were causing problems.
So, I made a JSFiddle to make some tests (see the link below)
If you are on Mac (I don't know about PC's browsers), you can see with jsFiddle that:
the black font on a white background is totally ok.
the white version of the same font on a black background is now bolder and messier for whatever reason.
And this would be resolved only if I apply a css "font-smoothing" property to it.
Nothing changed in the css and the font is absolutely standard.
All that changed is the constrast: dark background with a bright font or the contrary.
So, clearly, it's not a problem related to the font or to a technically blocking issue. It just depends on the background and the font color.
I originally thought it was because of my fancy font but even the standard webfonts will generate the problem.
So, at the end of the day, it only seems to be a matter of contrast.
Black on white is ok while white on black is not.
Is there any (css) workaround to get the same results, whatever the background luminosity/contrast or font color, whitout using "font-smoothing" as a non standardized fix then?
The contrast thing is probably a known issue and I can't believe it has no standard fix or, at least, a workaround that would work without browser-specific css properties.
Applying a css property according to the background color seems very awkward.
Here is the html:
<div class="white_no_smoothing">Test of text 0123</div>
<div class="black_no_smoothing">Test of text 0123</div>
<div class="black_smoothing" >Test of text 0123</div>
Here is the CSS:
.white_no_smoothing{
background:#fff;
color:#000;
width:250px;
height:50px;
display:block;
font-size:36px;
}
.black_no_smoothing{
background:#000;
color:#fff;
width:250px;
height:50px;
display:block;
font-size:36px;
}
.black_smoothing{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background:#000;
color:#fff;
width:250px;
height:50px;
display:block;
font-size:36px;
}
JSFiddle:
https://jsfiddle.net/Lzy4s4tw/3/
Thanks.
I'm not good at all this website creating. But i need my web portfolio for graphic design. So i created template on photoshop. Sliced it. And saved for web. Then i opened it in Dreamweaver. All i did rollover for my buttons. And here how it looks in IE
stormilloart.com
check it in Opera, Safari, Firefox - looks perfect. But in Internet Explorer ist all messed up. Maybe there is a fix. Please help me out.
When you put images inside anchor tags, IE adds border around it. But Photoshop takes exact width and height of the sliced images. Because of the border added around the images, it creates layout issue.
To fix this, remove border around images inside anchor tags.
Add following code in head section.
<style>
a img {
border-width : 0;
}
</style>
I have a CSS style which displays a png image in background. It works well in all browser, except in ie6.
In ie6 the bacground image is stretched to fit the block. How do I solve this ? Here's the CSS which I'm using to do this.
.error
{
color: #D8000C;
background-color: #FFBABA;
background-image: url('error.png');
}
IE7 / FF3.5
IE6
You probably use a png transparency fix script for IE6, I think the problem lies there because it probably applies a scale method.
Read the comments on this page.
The documentation of your png transparency fix will probably cover this.
I personally found using transparent pngs in IE 6.0 to be a major pain in the ass despite all the various fixes out there. I know this is not an original answer, but I would probably just do a conditional check and replace the image with a gif or jpg version if you really need to support IE 6.0 here, instead of relying on hacks to support this. Or just drop IE 6.0 already, this year, I've talked every single client into not supporting IE 6.0 on their new projects. Seriously, it's about damn time that thing stopped making our professional lives so god damn miserable.
If you're using the AlphaImageLoader filter, make sure sizingMethod='scale' is not present. Remove it or set it to image instead of scale.
Belatedpng is the best script I have found for this problem:
http://www.dillerdesign.com/experiment/DD_belatedPNG/
set actual width and height for the background image and background-position.
.error
{
color: #D8000C;
background-color: #FFBABA;
background-image: url('error.png');
background-position:left;
width:251px;
height:72px;
background-repeat:no-repeat;
}
here width and height are actual size of the error.png image. hope it helps.