I have a very simple SVG which gets rendered differently between Firefox and Chrome and I have no idea why. Any suggestions? I would not want to use any CSS to specially style things to get them in sync but have a simple stand-alone SVG.
<?xml version="1.0" encoding="utf-8" ?>
<svg baseProfile="tiny" height="400.0" version="1.2" width="400.0" xmlns="http://www.w3.org/2000/svg">
<rect fill="#fff" fill-opacity="0" stroke="#000" height="90.0" rx="5.0" ry="5.0" stroke-width="3" width="350.0" x="0" y="0"/>
<text font-size="18.0" stroke="#000" text-anchor="start" x="5.0" y="51.0">func: foo_bar_longer</text>
<text font-size="18.0" stroke="#000" text-anchor="end" x="345.0" y="51.0">class: bar_foo_longer</text>
</svg>
Firefox 67 on Linux:
Chromium 75.0.3770.90:
It seems setting font_family="Arial,Helvetica,sans-serif" on all text elements solved the problem. Browsers do not have the same default font.
Related
I have been trying to add an svg image to my django website for awhile now. However, I keep getting this error:
GET http://localhost:8000/images/enter.svg 404 (Not Found)
This is what I wrote
<img src='/images/enter.svg'>
and my folder structure is as such
index.html
- images
-- enter.svg
I've been googling around but I can't find a solution. I hear people copying and pasting the 'data' of the svg instead, but I haven't been able to find an example. Just in case it's actually useful, here's the data of the svg image I'm trying to attach to my page:
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
<svg fill-opacity="1" xmlns:xlink="http://www.w3.org/1999/xlink" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" xmlns="http://www.w3.org/2000/svg" font-family="'Dialog'" font-style="normal" stroke-linejoin="miter" font-size="12" stroke-dashoffset="0" image-rendering="auto">
<!--Unicode Character 'DOWNWARDS ARROW WITH CORNER LEFTWARDS' (U+21B5)-->
<defs id="genericDefs" />
<g>
<g>
<path d="M159.3281 330.8906 L76.6406 330.8906 Q92.5312 348.75 99.4219 368.8594 L89.2969 368.8594 Q69.6094 340.1719 34.5938 327.375 L34.5938 320.4844 Q69.6094 307.6875 89.2969 279 L99.4219 279 Q92.5312 299.25 76.6406 317.1094 L145.4062 317.1094 L145.4062 215.7188 L159.3281 215.7188 L159.3281 330.8906 Z" stroke="none" />
</g>
</g>
</svg>
Hi your svg code didnt seem to work so i think if you put this piece of code in wherever you want you svg placed it should work:
<svg width="124.73px" height="153.14px" viewBox="0 0 124.73 153.14">
<g>
<g>
<path d="M124.73,115.17H42.05c10.59,11.91,18.19,24.56,22.78,37.97H54.7C41.58,134.02,23.34,120.19,0,111.66v-6.89
c23.34-8.53,41.58-22.36,54.7-41.48h10.12c-4.59,13.5-12.19,26.2-22.78,38.11h68.77V0h13.92V115.17z"/>
</g>
</g>
</svg>
It ofcourse can be turned into an svg file and then linked into your code as you were trying. But you could also just put the code above into your code. example:
<html>
<body>
<h1> some content or whatever </h1>
<svg width="124.73px" height="153.14px" viewBox="0 0 124.73 153.14">
<g>
<g>
<path d="M124.73,115.17H42.05c10.59,11.91,18.19,24.56,22.78,37.97H54.7C41.58,134.02,23.34,120.19,0,111.66v-6.89
c23.34-8.53,41.58-22.36,54.7-41.48h10.12c-4.59,13.5-12.19,26.2-22.78,38.11h68.77V0h13.92V115.17z"/>
</g>
</g>
</svg>
</body>
</html>
like this it should show up on your page without having the linking problem. You can style your svg like this aswell now by giving your path an id.
https://css-tricks.com/lodge/svg/ there are plenty tutorials on this page that helped me a lot with svg.
Hope this works!
I have and SVG icon I need to use in a several toolbars on a page.
If I add the SVG code to the location in the toolbar, it works. However, since I need to use it many times I'm trying to define it one at the bottom of the page and then with "use" having it displayed in several places.
So I define it:
<svg>
<defs>
<g id="svgHelp" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none">
<path d="M1 12c0-6.075 4.925-11 11-11s11 4.925 11 11-4.925 11-11 11-11-4.925-11-11z"/>
<path d="M11.792 14v-1c1.609 0 3-1.391 3-3s-1.391-3-3-3c-1.194 0-2.342.893-2.792 1.921"/>
<path d="M12 17v1"/>
</g>
</defs>
</svg>
And then try to use it:
<use xlink:href="#svgHelp" x="0" y="0" />
But it does not display. What am I missing here?
I believe <use> must be wrapped by <svg>
<svg>
<use xlink:href="#svgHelp" x="0" y="0" />
</svg>
Is there a way to render svg elements with crisp edges while still keeping anti-aliasing?
I'm creating a browser-based tool that works in modern browsers.
Playing around with the shape-rendering attribute doesn't give me the results I'm looking for.
I want my elements to have nice anti-aliasing so that the paths look smooth like below with shape-rendering: auto:
But I also want elements that don't require anti-aliasing, like the start box to look sharp and crisp, such as when rendered with shape-rendering: crispEdges:
Is this possible? Am I looking to have my cake and eat it too?
Perhaps you set shape-rendering property for root svg element.
You should set shape-rendering property for each shape elements, like this.
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="10" width="150" height="20" shape-rendering="crispEdges"
fill="none" stroke="black"/>
<path d="M80,30l100,100" shape-rendering="optimizeQuality"
stroke="black" stroke-width="5"/>
</svg>
If you want your boxes to appear sharp without any blurring due to antialiasing, and without using crispEdges mode, make sure the line edges are on pixel boundaries. So, for example, if your lines are an odd number of pixels wide, give them coordinates that are at 0.5 of a pixel.
<rect x="10.5" y="10.5" width="150" height="20"
stroke-width="1px" fill="none" stroke="black"/>
And on the boundary if the stroke width is even.
<rect x="10" y="10" width="150" height="20"
stroke-width="2px" fill="none" stroke="black"/>
Of course, this only really works if your SVG is being rendered at 1:1. That is, it's not being rescaled by the browser. And only for lines that are horizontal and vertical.
[I'm posting this as an answer rather than a comment, because I want to post a picture. Otherwise, this is a comment on the useful post by #defghi1977 . +1 to him, by the way.]
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="10" width="150" height="20" shape-rendering="crispEdges"
fill="none" stroke="black" />
<rect x="10" y="50" width="150" height="20" shape-rendering="auto"
fill="none" stroke="black" />
<path d="M40,30l100,100" shape-rendering="crispEdges"
stroke="black" stroke-width="5" />
<path d="M80,30l100,100" shape-rendering="auto"
stroke="black" stroke-width="5" />
</svg>
Produced
This was rendered by Firefox 38.0.5 .
In Internet Explorer 11, both shape-rendering setting produces the same result with anti-aliasing and not crisp.
I am using google chrome version 24.0.1312.57 on Mac OS X 10.6.8.
In Safari 5.1.7 the svg image looks like this:
In Chrome it looks like this:
Notice the markers are gone from the paths and the path that has a pattern now has a fill of black and the unicode character has an A behind it. This only happens if the image is a data uri in the address bar in google chrome. If I open the svg image up as a file in chrome it displays correctly.
I've tried taking the line endings away and putting it in base64, but it doesn't seem to fix anything.
Is this a bug with chrome or am I missing something?
Here's the source svg:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg_elem">
<title id="doctitle">URI Test</title>
<defs id="thedefs">
<pattern id="ptrn" overflow="visible" patternUnits="userSpaceOnUse"
x="0" y="0" width="10" height="10"
viewBox="0 0 10 10" >
<line fill="none" stroke="#000000" stroke-width="0.5" x1="-5" y1="-5" x2="15" y2="15"/>
</pattern>
<marker id="mtriangle" viewBox="0 0 10 10" refX="0" refY="5" markerUnits="strokeWidth" markerWidth="4" markerHeight="3" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#FFF" stroke="#000" stroke-width="1"/>
</marker>
<marker id="mcircle" viewBox="-2 -2 12 12" refX="5" refY="5" markerUnits="strokeWidth" markerWidth="4" markerHeight="3" orient="auto">
<circle cx="5" cy="5" r="5" fill="#FFF" stroke="#000" stroke-width="1"/>
</marker>
</defs>
<g>
<path
fill="#F00"
stroke="#000000"
stroke-width="3"
marker-start="url(#mtriangle)"
marker-mid="url(#mcircle)"
d="M10,10l0,60l60,0z"/>
<path
fill="url(#ptrn)"
stroke="#000"
stroke-width="3"
marker-start="url(#mtriangle)"
marker-mid="url(#mcircle)"
d="M110,110l0,70l70,0z"/>
<text
fill="#000"
x='100'
y='100'
font-size="14pt"
font-family="serif"
text-anchor="middle"
space="preserve">N 34° 45' 30" E 300 ft</text>
</g>
</svg>
Here's the data uri.
data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODUwIiBoZWlnaHQ9IjEwNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIGlkPSJzdmdfZWxlbSI+PHRpdGxlIGlkPSJkb2N0aXRsZSI+VVJJIFRlc3Q8L3RpdGxlPjxkZWZzIGlkPSJ0aGVkZWZzIj4gICAgPHBhdHRlcm4gaWQ9InB0cm4iIG92ZXJmbG93PSJ2aXNpYmxlIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCI+ICAgICAgICA8bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMC41IiB4MT0iLTUiIHkxPSItNSIgeDI9IjE1IiB5Mj0iMTUiPjwvbGluZT4gICAgPC9wYXR0ZXJuPiAgICA8bWFya2VyIGlkPSJtdHJpYW5nbGUiIHZpZXdCb3g9IjAgMCAxMCAxMCIgcmVmWD0iMCIgcmVmWT0iNSIgbWFya2VyVW5pdHM9InN0cm9rZVdpZHRoIiBtYXJrZXJXaWR0aD0iNCIgbWFya2VySGVpZ2h0PSIzIiBvcmllbnQ9ImF1dG8iPiAgICAgIDxwYXRoIGQ9Ik0gMCAwIEwgMTAgNSBMIDAgMTAgeiIgZmlsbD0iI0ZGRiIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEiPjwvcGF0aD4gICAgPC9tYXJrZXI+ICAgIDxtYXJrZXIgaWQ9Im1jaXJjbGUiIHZpZXdCb3g9Ii0yIC0yIDEyIDEyIiByZWZYPSI1IiByZWZZPSI1IiBtYXJrZXJVbml0cz0ic3Ryb2tlV2lkdGgiIG1hcmtlcldpZHRoPSI0IiBtYXJrZXJIZWlnaHQ9IjMiIG9yaWVudD0iYXV0byI+ICAgICAgPGNpcmNsZSBjeD0iNSIgY3k9IjUiIHI9IjUiIGZpbGw9IiNGRkYiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxIj48L2NpcmNsZT4gICAgPC9tYXJrZXI+ICAgIDwvZGVmcz48Zz4gPHBhdGggZmlsbD0iI0YwMCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjMiIG1hcmtlci1zdGFydD0idXJsKCNtdHJpYW5nbGUpIiBtYXJrZXItbWlkPSJ1cmwoI21jaXJjbGUpIiBkPSJNMTAsMTBsMCw2MGw2MCwweiI+PC9wYXRoPiAgICAgIDxwYXRoIGZpbGw9InVybCgjcHRybikiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIzIiBtYXJrZXItc3RhcnQ9InVybCgjbXRyaWFuZ2xlKSIgbWFya2VyLW1pZD0idXJsKCNtY2lyY2xlKSIgZD0iTTExMCwxMTBsMCw3MGw3MCwweiI+PC9wYXRoPiAgICAgICAgICAgICAgPHRleHQgZmlsbD0iIzAwMCIgeD0iMTAwIiB5PSIxMDAiIGZvbnQtc2l6ZT0iMTRwdCIgZm9udC1mYW1pbHk9InNlcmlmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBzcGFjZT0icHJlc2VydmUiPk4gMzTCsCA0NScgMzAiIEUgMzAwIGZ0PC90ZXh0PjwvZz48L3N2Zz4JCQk=
Not sure about markers and patterns, but as for the character set, Chrome must be using a different default encoding for data:URIs. If you add charset=UTF-8; in the beginning, e.g.:
data:image/svg+xml;charset=UTF-8;base64,PHN2ZyB3aWR0aD0iODUwIiBoZWlnaHQ9IjEwNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIGlkPSJzdmdfZWxlbSI+PHRpdGxlIGlkPSJkb2N0aXRsZSI+VVJJIFRlc3Q8L3RpdGxlPjxkZWZzIGlkPSJ0aGVkZWZzIj4gICAgPHBhdHRlcm4gaWQ9InB0cm4iIG92ZXJmbG93PSJ2aXNpYmxlIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCI+ICAgICAgICA8bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMC41IiB4MT0iLTUiIHkxPSItNSIgeDI9IjE1IiB5Mj0iMTUiPjwvbGluZT4gICAgPC9wYXR0ZXJuPiAgICA8bWFya2VyIGlkPSJtdHJpYW5nbGUiIHZpZXdCb3g9IjAgMCAxMCAxMCIgcmVmWD0iMCIgcmVmWT0iNSIgbWFya2VyVW5pdHM9InN0cm9rZVdpZHRoIiBtYXJrZXJXaWR0aD0iNCIgbWFya2VySGVpZ2h0PSIzIiBvcmllbnQ9ImF1dG8iPiAgICAgIDxwYXRoIGQ9Ik0gMCAwIEwgMTAgNSBMIDAgMTAgeiIgZmlsbD0iI0ZGRiIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEiPjwvcGF0aD4gICAgPC9tYXJrZXI+ICAgIDxtYXJrZXIgaWQ9Im1jaXJjbGUiIHZpZXdCb3g9Ii0yIC0yIDEyIDEyIiByZWZYPSI1IiByZWZZPSI1IiBtYXJrZXJVbml0cz0ic3Ryb2tlV2lkdGgiIG1hcmtlcldpZHRoPSI0IiBtYXJrZXJIZWlnaHQ9IjMiIG9yaWVudD0iYXV0byI+ICAgICAgPGNpcmNsZSBjeD0iNSIgY3k9IjUiIHI9IjUiIGZpbGw9IiNGRkYiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxIj48L2NpcmNsZT4gICAgPC9tYXJrZXI+ICAgIDwvZGVmcz48Zz4gPHBhdGggZmlsbD0iI0YwMCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjMiIG1hcmtlci1zdGFydD0idXJsKCNtdHJpYW5nbGUpIiBtYXJrZXItbWlkPSJ1cmwoI21jaXJjbGUpIiBkPSJNMTAsMTBsMCw2MGw2MCwweiI+PC9wYXRoPiAgICAgIDxwYXRoIGZpbGw9InVybCgjcHRybikiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIzIiBtYXJrZXItc3RhcnQ9InVybCgjbXRyaWFuZ2xlKSIgbWFya2VyLW1pZD0idXJsKCNtY2lyY2xlKSIgZD0iTTExMCwxMTBsMCw3MGw3MCwweiI+PC9wYXRoPiAgICAgICAgICAgICAgPHRleHQgZmlsbD0iIzAwMCIgeD0iMTAwIiB5PSIxMDAiIGZvbnQtc2l6ZT0iMTRwdCIgZm9udC1mYW1pbHk9InNlcmlmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBzcGFjZT0icHJlc2VydmUiPk4gMzTCsCA0NScgMzAiIEUgMzAwIGZ0PC90ZXh0PjwvZz48L3N2Zz4JCQk=
...it should work properly!
Here's a fiddle.
EDIT Upon further inspection (re: markers and patterns), it seems like this is a bug in Chrome. It looks like Chrome incorrectly interprets (completely ignores?) url(#hash) attribute values in SVG data:URIs when embedded as <object> (and possibly in other cases?).
Here's another fiddle with extensive testing of this issue.
Everything works correctly for me in Safari 6.0.2, Firefox 18.0.2 (Mac), Firefox 10.0.1 (Win), Opera 12.12 (Mac), and IE 9. <object> (as well as <embed> and <iframe>) embeds are not displaying correctly in Chrome 24.0.1312.57 (Mac/Win) or 26.0.1405.0 canary (Mac), whereas <img> embeds are working fine. Pasting either the URI-encoded or base64-encoded data:URIs into the address bar is also not working.
Is there a way in SVG of drawing multiple lines of text within a single <text> element that follow the same path contour? Here is the closest I have been able to get:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<path id="text_0_path" d="M 100 150 A 100 100 0 1 1 300 150"/>
</defs>
<use xlink:href="#text_0_path" stroke="blue" fill="none"/>
<text font-family="Arial" font-size="18px" text-anchor="middle">
<textPath xlink:href="#text_0_path" startOffset="50%">
<!-- 157.075 is the center of the length of an arc of radius 100 -->
<tspan x="157.075">Here is a line</tspan>
<tspan x="157.075" dy="20">Here is a line</tspan>
<tspan x="157.075" dy="20">Here is a line</tspan>
</textPath>
</text>
</svg>
Here is the output (in Chrome):
This is almost what I want. The problems:
I would like each line of text centered at the top of the arc, not to start the text there. It seems like the text-anchor attribute is being forgotten when the x value is specified in a tspan along a path. (This is not the case with straight text; the text-anchor attribute is remembered.)
Each successive line of text is crunched, as if following a concentric path. I would like each line of text to follow the same contour, as if the path were simply translated in the y direction by the height of the font.
I know I could just create three separate <path> elements and associate them with three separate <text> (or <textPath>) elements, but it would be really nice to keep all the text logically together using <tspan> elements for later applications.
Or is this supposed to work but there is a rendering bug in Chrome? (unlikely, IMO)
I can't tell if you want the text rendered on concentric circles or if you simply want it translated. If the former, then you may want to experiment with letter-spaccing attributes on your t-span elements. This will add tracking to your characters pushing them further apart. I tried the following, but alignment between lines is lost for some reason:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<path id="text_0_path" d="M 100 150 A 100 100 0 1 1 300 150"/>
</defs>
<use xlink:href="#text_0_path" stroke="blue" fill="none"/>
<text font-family="Arial" font-size="18px" text-anchor="middle">
<textPath xlink:href="#text_0_path" startOffset="50%">
<!-- 157.075 is the center of the length of an arc of radius 100 -->
<tspan x="157.075">Here is a line</tspan>
<tspan x="157.075" dy="20" letter-spacing="2">Here is a line</tspan>
<tspan x="157.075" dy="20" letter-spacing="4">Here is a line</tspan>
</textPath>
</text>
</svg>
However, if you want the latter (concentric circles), this appears to work in Safari and Chrome on the Mac:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<path id="text_0_path" d="M 100 150 A 100 100 0 1 1 300 150"/>
</defs>
<use xlink:href="#text_0_path" stroke="blue" fill="none"/>
<g font-family="Arial" font-size="18px">
<text text-anchor="middle">
<textPath xlink:href="#text_0_path" startOffset="50%">Here is a line</textPath>
</text>
<text text-anchor="middle" transform="translate(0, 20)">
<textPath xlink:href="#text_0_path" startOffset="50%">Here is a line</textPath>
</text>
<text text-anchor="middle" transform="translate(0, 40)">
<textPath xlink:href="#text_0_path" startOffset="50%">Here is a line</textPath>
</text>
</g>
</svg>
I know you were shooting for tspans only, but as you said, it seemed to reset the startOffset values.
HTH,
Kevin