I'm using an SVG inside of an HTML document, and using an external SVG file inside of said SVG. Like so:
<svg class="ipachart" width="500" height="350" viewBox="0 0 500 350" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- In Firefox 38.0.5, the svg does not scale to fit the SVG. While it's fine in Chrome. -->
<image x="0" y="0" width="100%" height="100%" xlink:href="https://www.dropbox.com/s/gtindax1177ewmx/Blank_vowel_trapezoid.svg?dl=1" />
<!-- Using a PNG, it scales just fine in Firefox -->
<!-- <image x="0" y="0" width="100%" height="100%" xlink:href="https://www.dropbox.com/s/w0i764blf4tbc4z/Blank_vowel_trapezoid.png?dl=1" /> -->
</svg>
JSfiddle
This works fine in Chrome and Safari. (I do not care for IE.)
The problem is that the SVG image does not scale to fit in Firefox (version 38.0.5). Instead of looking like this:
It looks like this (as if it wasn't scaling at all):
If I use a PNG version in place of the SVG, it works like expected. Which makes me think it's a bug.
Should I file a bug report?
No. Because it looks to me like Firefox has the correct behaviour here.
The SVG you are linking to ("Blank_vowel_trapezoid.svg") has no viewBox attribute, so it should not / will not be scaled to fit your <img> bounds.
If anything you should file bugs against Chrome and IE.
If you want tthe SVG to scale. Add a viewBox to its root <svg> tag:
viewBox="0 0 1000 700"
and remove the width and height attributes.
Related
My SVG image is pixel perfect, and all browsers render it OK, except FireFox.
Example 1 (Bootstrap markup):
https://codepen.io/anon/pen/gdVxJo
There are just two rectangles in Bootstrap columns. All the rectangles has pixel-aligned borders and border width=2px but FireFox adds antialiasing.
I guess it depends of area height, but do not know why. There is example with one rectangle without any CSS.
Example 2 (clean HTML):
https://codepen.io/anon/pen/OoKxEd
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="396" height="100">
<rect x="0" y="0" width="396" height="100" fill="none" stroke="#000" stroke-width="2"></rect>
</svg>
</body>
You maybe need to change height of your render area on CodePen to reproduce the bug.
Anybody knows is it possible to force FireFox to draw lines correctly?
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
I'm having rect inside svg and rect is filled with some pattern. This pattern is just png image. Zooming this rect work fantastic in FireFox, Safari etc, but not in Chrome and Chromium. Chrome is making this image a little bit blurry. I was searching for similiar problems, but i need svg, rect, pattern to be 100% width and height... it is they need to be 100% of container size and not some fixed size. I created fiddle to see the effect: http://jsfiddle.net/j5gfjnpd/2/
<div style="width: 100vw; height: 100vh">
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<defs>
<pattern id="floor" viewBox="0 0 3508 4962" width="100%" height="100%" patternContentUnits="objectBoundingBox" preserveAspectRatio="xMidYMid meet">
<image id="test" width="3508" height="4962" preserveAspectRatio="xMinYMin meet"></image>
</pattern>
</defs>
<g id="mapZoom">
<rect width="100%" height="100%" fill="url(#floor)">
</rect>
</g>
</g>
</svg>
</div>
To see this effect you have to zoom-scroll the image and search for some small captions. In Chrome they are blurried and in FireFox they are really clean and nice.
Is there some fix to this, because i'm losing my head trying to fix this. I will be really happy to see some help. Thanks in advance
My best guess is that the zoom is being done on the GPU by Chrome, in which case, it's not re-rasterizing the jpg, it's just doing pixel interpolation when it scales the asset. AFAIK, there is no reliable way to kick Chrome to re-rasterize, but you can try doing it by adding a transition/animation that can't be performed on the GPU (something that's not a scale/skew/position transform or opacity).
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’