I don't know much about SVG - was just trying to learn a bit. So, I went to the Wikipedia SVG Example
and thought "Oh, can I just embed XML like that in my web page?" Tried it, and bascially, yes, you can, but the image I see rendered in Chrome (Version 45.0.2454.101 m running on Windows Enterprise 7) is cutoff right about the Y=150 mark (Y = 150 on the Wikipedia page's grid).
Same web page rendered under IE looks just like the image on the Wikipedia page.
Same web page viewed under Firefox is also cut off like Chrome. So it seems like IE is getting something right here that Chrome and Firefox are getting wrong.
Here is the whole source of the web page I am viewing:
<html>
<head>
<title>SVG test</title>
</head>
<body>
<h1>SVG test</h1>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4" stroke="pink" />
<circle cx="125" cy="125" r="75" fill="orange" />
<polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" />
<line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />
</svg>
The HTML doesn't get much simpler than this. What is the issue here? Any easy way to make Chrome and Firefox render the whole image (i.e., like IE does)?
Thanks!
You need to supply width and height attributes (or styles). Without that the outer <svg> element defaults to 300 x 150px in size.
html, body {
width: 100%;
height: 100%;
}
<html>
<head>
<title>SVG test</title>
</head>
<body>
<h1>SVG test</h1>
<svg width="100%" height="100%">
<rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4" stroke="pink" />
<circle cx="125" cy="125" r="75" fill="orange" />
<polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" />
<line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />
</svg>
Firefox and Chrome are right and IE is wrong in this case.
Related
I am working a project by use SVG viewBox, this is a html snippet.
<body>
<svg width="960" height="960" viewBox="18897158,-480,960,960">
<g>
<circle cx="18897482" cy="-94" r="3" fill="#18ff00"></circle>
<circle cx="18897837" cy="-102" r="3" fill="#18ff00"></circle>
<line x1="18897482" y1="-94.00" x2="18897837" y2="-102" stroke-width="1" stroke="#18ff00">
</line>
<text x="18897660" y="-98" fill="#18ff00" dominant-baseline="middle"
text-anchor="middle">0.00094mm</text>
</g>
</svg>
</body>
When this html in Chrome, the line element does not display correctly, but it works in Edge. I want to know is this a bug in Chrome?
When I draw SVG stripes with a pattern and print it in Google Chrome, some lines become ugly like this.
This does not happen in other browsers. For example, in Microsoft Edge, like this.
How can I print this properly in Google Chrome? Or is there anything wrong in this code?
Here is my code.
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<defs>
<pattern id="pattern_qET8y" patternUnits="userSpaceOnUse" width="10" height="10" patternTransform="rotate(45)">
<line x1="0" y="0" x2="0" y2="10" stroke="#24194D" stroke-width="1" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#pattern_qET8y)"/>
</svg>
</body>
</html>
I tried an example of using the svg tag tref from W3C SVG specification 1.1 the following way
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<svg width="10cm" height="3cm" viewBox="0 0 1000 300"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<text id="ReferencedText">
Referenced character data
</text>
</defs>
<desc>Example tref01 - inline vs reference text content</desc>
<text x="100" y="100" font-size="45" fill="blue">
Inline character data
</text>
<text x="100" y="200" font-size="45" fill="red">
<tref xlink:href="#ReferencedText" />
</text>
<!-- Show outline of canvas using 'rect' element -->
<rect x="1" y="1" width="998" height="298"
fill="none" stroke="blue" stroke-width="2" />
</svg>
</body>
</html>
with Microsoft Edge. However the referenced text was not outputted. Does MS Edge support this tag?
<tref> was deprecated and it is not supported by most browsers.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tref
my svg is just text over a circke with full screen rectangle
svg
<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="red"/>
<circle cx="150" cy="100" r="80" fill="green"/>
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">Hello SVG</text>
</svg>
When in img src it is arbitriraly truncated at the bottom why ? How to fix this ?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<img src="hello.svg" type="image/svg+xml">
</body>
</html>
Specify the width, height and viewPort attributes of svg.
<svg version="1.1" width="300" height="200" viewPort="0 0 300 200" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="red" />
<circle cx="150" cy="100" r="80" fill="green" />
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">Hello SVG</text>
</svg>
You have not specified any size for the <img> or <svg> so the browser is choosing the default size for indeterminate sized objects, which is 300x150. So your circle will get cut off at the bottom. The solution, as chipChocolate has already pointed out, is to give one or the other an appropriate size.
In Google Chrome 24, if an element referenced by a <use> element is defined later in the document it isn't rendered. I didn't notice anything related to element order in the documentation for the use element.
Is this behavior undefined and shouldn't be expected to be consistent across browsers or just a bug in Chrome?
An example of this can be seen below (slightly modified from this question). Blue circle renders as expected, red, not so much. Firefox 17 and IE 9 render both circles as I would expect. When the same content is referenced as an external <img />, both circles render as well.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chrome use-tag bug?</title>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200">
<defs>
<g id="test2">
<circle cx="50" cy="50" r="25" fill="blue"/>
</g>
</defs>
<g>
<rect x="0.5" y="0.5" width="199" height="199" stroke="black" fill="none"/>
<use xlink:href="#test1" x="0" y="0"/>
<use xlink:href="#test2" x="0" y="0"/>
</g>
<defs>
<g id="test1">
<circle cx="100" cy="100" r="25" fill="red"/>
</g>
</defs>
</svg>
</body>
</html>
UPDATE: Seems to be working in Chrome 39.
The Rendering Order depends on the element order, so it looks strong like a bug in chrome:
SVG Rendering Order 1.0, Part 2: Language