I'm working on a site and decided to give SVGs a try. My SVGs display as they should in IE, Firefox, and Chrome. However, in Safari, the images are blurry looking. Here is what I'm doing in code:
<object data="section_3.svg" type="image/svg+xml" width="100%" height="722" class="aligncenter" >
<img src="section_3.png" />
<svg version="1.1" x="0px" y="0px" width="763" height="1602" viewBox="0 0 763 1602" preserveAspectRatio="xMinYMin meet"></svg>
</object>
For the life of me, I can't figure out why the images are blurry. The weird thing is when I zoom in/out in Safari, the blurriness clears up. Is there something I'm not doing in my code? Any help would be much appreciated. Thanks!
Adding -webkit-transform: translate3d(0,0,0) to the SVG fixed the issue for me.
If your svg contains straight horizontal and vertical lines, they may seem to blur or sharpen randomly as you zoom in and out, as they have to pick the optimum set of pixels on your screen, though that's a general browser thing, not a Safari thing.
Safari is known not to support filters or blur effects, but I don't know what's inside your svg. Your object tags make sense, and your fallback .png, but i don't understand why you then have svg tags with no content.
Related
I'm trying to render a very large SVG image inside an img tag.
This works fine in Chrome, but Firefox (both Windows and Linux) renders the image blurry as if it was a raster image with much lower resolution.
The problem can be broken down to a simple example:
SVG image with a view box of 30,000x30,000, showing a diagonal line
The SVG is displayed in an img tag that has a width and height of 30,000px each
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30000 30000'%3E%3Cpath d='M 0,0 L30000,30000' stroke-width='1' stroke='%23000' /%3E%3C/svg%3E" width="30000" height="30000" />
This renders as follows (cropped but not scaled):
What I already tried unsuccessfully:
different view box sizes
smaller img dimensions but scaled up with CSS transforms (2D/3D)
image-rendering: crisp-edges on the img
shape-rendering: crispEdges on the SVG content
Using an <object> instead of an <img> actually renders the image crisp, but the <object> element comes with its own shortcomings and pitfalls. If possible I'd like to keep using the <img> element.
Does anybody have hints what might be the problem or ideas for possible solutions?
I have a particular svg file encoded in base64 that I'm trying to display with an img tag.
My problem is; for this particular svg only the image is not rendered when resized on internet explorer only
You can try it yourself (I'm on windows7 with ie11): CodePen
Do you have any explanation/workaround for this ?
Best regards
If you look very close when playing with the size, we can see parts of the SVG are actually displayed. It seems that IE resizes the canvas but not the actual shape.
Decoding your SVG file, here is what we get:
<svg height="361.5" width="361.5" xmlns="http://www.w3.org/2000/svg"><path d="m-110.25-20.25h582v402h-582z" fill="none"/>...</svg>
The height and width are fixed. Changing these properties with a viewBox property like this allows IE to resize the shape:
<svg viewBox="0 0 361.5 361.5" xmlns="http://www.w3.org/2000/svg"><path d="m-110.25-20.25h582v402h-582z" fill="none"/>...</svg>
Kind regards!
I'm trying to reduce the download size of transparent PNGs by decomposing them into color and alpha images. This approach works fine, for my customer's images the size is reduced by over 50%.
To recompose the images I'm experimenting with both SVG and canvas.
The SVG solution uses an opacity mask, and the canvas uses the globalCompositeOperation.
The problem is, the SVG incorrectly shows dark edges when down-scaling (either by specifying the size in CSS or directly on the SVG). These dark edges do not appear when rendering the SVG at the same size of the input images. The canvas works fine. This happens in all browsers I tested (Chrome, IE11, Firefox)
The problem I believe, is that the SVG will independently resize the alpha-image and color-image, and then apply the opacity mask. However this approach does not work. In image processing it is well known that to resize a transparent image, one either has to pre-multiply the color components by the alpha, and then use a standard resizing algorithm, or one has to perform a weighted average (since mostly transparent pixels have less impact on the final color). See for example this discussion
When applying SVG filter effects, one could initially tweak the intermediate resolution that is used, but I can't figure out how to do this when using the SVG mask property (Robert Longson correctly pointed out to me that the filter effects do not support this anymore, since the filterRes attribute was deprecated)
Here's the SVG code (our run it directly from my website in any HTML5 compliant browser)
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='1000' height='454' viewBox='0 0 2560 1162'>
<defs>
<mask id='mask'>
<image color-interpolation='sRGB' image-rendering='optimizeQuality' width='2560px' height='1162px' xlink:href='first-A.png'></image>
</mask>
</defs>
<image color-interpolation='sRGB' image-rendering='optimizeQuality' mask='url(#mask)' width='2560px' height='1162px' xlink:href='first-RGB.png'></image>
</svg>
Does anyone know how to tweak the SVG mask effect so that these edge artifacts do not appear?
Thanks a lot,
Peter
Having issues with an SVG I have made.
It works great in chrome and does exactly what i want and expect it too but I cannot get it working in any other browser (tried IE and Firefox so far).
My SVG is an image with a clip path cutting it out into the shape I want and this works on different resolutions spanning the full page width. Below is how it looks in chrome including an image of when the page width expands
The html for the SVG looks as follows
<svg id="mobile-svg" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 875.67 321.8" preserveAspectRatio="none">
<defs>
<style>.cls-1{fill:#60b6e1;}</style>
</defs>
<clipPath id="myClip">
<path d="M0,0S1,7.68,12.63,18.54,364.25,297.4,364.25,297.4s30.77,27.3,84.06.38,379.59-192,379.59-192S873.34,87.5,875.67,0H0Z" transform="translate(0)"></path>
</clipPath>
<image class="cls-image" xlink:href="http://localhost:63342/Carfinance247Rebrand/Content/img/carDrivingImage.png" clip-path="url(#myClip)"/>
</svg>
The CSS for the SVG (.SCSS)
#mobile-svg {
margin-bottom: -3px;
background-color: #5fb6e0;
.cls-image {
width: 100%;
height: 115%;
}
}
All works in chrome as expected but see image below for Firefox, the same thing also happens in IE (version 9 - 11)
I have tried changing position types and display types, also setting set width and ehights but cant get it to appear in other browsers.
I ahve an SVG that uses clip paths at a different point in the page and this one works fine, hence the confusion for this one. See image below of my working SVG
inb4 I am relatively new to SVG's
In SVG 1.1 an <image> element must have height and width attributes i.e. you can't set the height and width via CSS.
In SVG 2 it is proposed that image elements have width and height that are CSS properties.
Only Chrome has so far implemented this part of the SVG 2 specification.
I have set an SVG to be 100% width of its parent container, however when the parent container is scaled in a responsive way the SVG jolts in size as it tries to maintain its aspect ratio.
This is a problem when trying to align an SVG to a sibling DIV as in this example;
<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="100%" viewBox="0 0 480 29.8">
<path style="fill:blue;" d="M480,29.8H0v-18C0,5.3,5.3,0,11.8,0h456.4c6.5,0,11.8,5.3,11.8,11.8L480,29.8L480,29.8z"/>
</svg>
<div class="rect" style="width:100%;background:red;height:100px;"></div>
As you can see when changing the width of the window, the DIV scales as expected, where the SVG jolts in size.
Updated Fiddle 14/03/16 https://jsfiddle.net/adotellison/euyyze4z/2/
Can anyone explain why this is happening? And how to fix this issue?
I have seen this issue in web-kit browser.
It looks like the SVG's partial-pixel positioning calculation being done differently than the other HTML elements.
The problem is only with the contents of the SVG. If I put a CSS border on the SVG tag, the border remains the proper size, but the shapes inside wiggle when resizing.
I see the issue in Chrome, but not firefox in your jsfiddle, but if I put the SVG in a file and reference it as an image in the HTML I get the strange behavior in both.
I'm guessing this is just a bug and you can't really do anything to compeletly fix it.
You can add preserveAspectRatio="none" to the SVG tag. I think it's technically stretching it to fit the available space, but since it's only a pixel or two it's not noticeable.
I found that on this page: https://css-tricks.com/scale-svg/
This woman literally co-wrote the book on SVG: http://shop.oreilly.com/product/0636920032335.do