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.
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?
We're developing a site for a client who needs to use SVGs to simulate the top/bottom of devices around pictures and videos. I'm running into an issue (almost exclusively on iPad, but it does happen to some extent on other browsers, sometimes) where the SVG is failing to fill space properly. When the browser scales, the SVG will scale as well, but it will leave small gaps at various sizes. I can't get the SVG to fill its container edge-to-edge reliably.
I've tried adding the SVG through an image tag, object tag, and I've tried hardcoding the SVG data into the pages. I've also tried a few different ways to force the SVG to fill that space, and every version of what I've tried has netted the same results.
Here's a screenshot that illustrates the problem:
And here's the code for the above: https://codepen.io/the_pm/pen/dypVMMB - I added a version with the SVG hardcoded into place. The hardcoded SVG works in more browsers than the version (note that the SVG doesn't have any style applied to it). But they both still display gapping on iPad/Safari, which I thought the absolute positioning would fix, but it doesn't.
As stated, I've tried linking the SVG, and I've tried adding the SVG code directly into the page, without any difference in display. Here are a couple CSS methods I used to try to force the desired behavior.
METHOD 1:
.topper {
font-size:0 ; /* prevents gapping due to font descenders */
height:auto ;
padding-bottom:3.62% ; /* height/width of image */
position:relative ;
width:100%
}
.topper img {
height:100% ;
left:0 ;
position:absolute ;
top:0 ;
width:100%
/* also tried bottom:0 and right:0 instead of height:100% and width:100% - no luck */
}
METHOD 2:
.topper {
background:url('path/to/image.svg') center top no-repeat ;
background-size:100% 100% ;
font-size:0 ;
height:auto ;
padding-bottom:3.62% ;
width:100%
}
I have tried at least a dozen variations of the code above, but the result is the same as you see in the codepen.
Any assistance would be most appreciated!
You are experiencing a rounding problem you have no real control over. Browsers per specification are at large how to handle those. You are using a SVG that is much wider than high. That has the mathematical consequence that, when scaling it, rounding its size to full pixels will result in a significant change of the aspect ratio.
Now SVGs react differently to changes in aspect ratio than other images. Browsers always recompute raster images so they will fill all the pixels, even to the price of distorting them a bit. SVGs act on an attribute preserveAspectRatio that defaults to the value "xMidYMid meet". Glossing over what this exactly means, what it amounts to is comparable to the CSS "contain" value.
When scaling your image, the act of rounding a height value down can easily result in the width, when computing exactly, lacking more than 1px. Here is an example: Let the width available be 982px. The computed height to preserve aspect ratio would be 78 / 2160 * 982 = 35.4611px. Now, if the browser rounds down, the exact width would be 2160 / 78 * 35 = 969.231px. That would be displayed as a gap of ca. 6.6px on each side.
The obvious way to counteract this is to set the attribute to preserveAspectRatio="none". (I've taken the liberty to rewrite your SVG, simplifying it and improving readability.)
svg {
display: block;
width: 982px;
height: 35px;
background: green;
margin: 20px 0;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2160 78">
<rect x="1" y="1" width="2158" height="120" rx="30" style="fill:none;stroke:#000;stroke-width:2" />
<circle r="9" cx="62" cy="40" />
<circle r="9" cx="97" cy="40" />
<circle r="9" cx="132" cy="40" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2160 78" preserveAspectRatio="none">
<rect x="1" y="1" width="2158" height="120" rx="30" style="fill:none;stroke:#000;stroke-width:2" />
<circle r="9" cx="62" cy="40" />
<circle r="9" cx="97" cy="40" />
<circle r="9" cx="132" cy="40" />
</svg>
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 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
Inside a simple SVG element I have an image.
Chrome: Version 28. - works perfect
Firefox: 22.0 - no image is drawn
Opera: 12.16 - image is show 4 times larger than normal
Code:
<svg width="500px" height="500px" viewBox="0 0 70 70">
<image x="0" y="0" width="10" height="10"
id="knight" xlink:href="/images/knight.svg" />
</svg>
Your SVG is not being scaled to fit your 10x10 image rectangle because it has no viewBox. SVG renderers need to know the dimensions of the SVG content in order to know how to scale it. That is what the viewBox attribute is for.
Try adding the following to the root <svg> element in knight.svg.
viewBox="0 0 45 45"
Also, you need to define your namespaces for svg and xlink. Although perhaps you have just removed those for clarity(?).
Your knight is 45 x 45 pixels in size. The top left corner (10 x 10) pixels is blank.
You are asking for the image to be displayed for that top left corner in the <image> markup so Firefox correctly shows nothing because there's nothing there.
If you want to see the knight, make the <image> width and height 45 to match the underlying knight.svg dimensions.
Neither Chrome nor Opera seem to display the image correctly
An ‘image’ element establishes a new viewport for the referenced file as described in Establishing a new viewport. The bounds for the new viewport are defined by attributes ‘x’, ‘y’, ‘width’ and ‘height’