SVG Text does not render in Chrome or Safari - svg

I have some SVG text that works fine on Firefox but in Chrome and Safari does not appear.
I have tried:
Adding padding to the svg container in case the text was being
cut-off,
Removing [xml:space="preserve'] from the text,
Adding a fill color inline.
<svg class="fraction_spinner" width="64" height="64" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle id="CS1_01-intro" cx="32" cy="32" r="25" fill="transparent"/>
<text class="spinner-text spinner-text__casestudy" xml:space="preserve">
<textPath xlink:href="#CS1_01-intro">Longform case study</textPath>
</text>
</svg>
I expect the text to render as it does in Firefox, but to no avail in Chrome and Safari


One of the enhancements in the SVG 2 specification is that textPath elements no longer need only point to path elements. They should now be able to point to any shape. Firefox has implemented that part of the SVG 2 specification, other browsers have not yet done so.
In fairness there are parts of SVG 2 that other browsers have implemented that Firefox has not.
You can draw a circle using a path instead which will work in all browsers.


Use a path instead of the circle:
<svg class="fraction_spinner" width="64" height="64" version="1.1" xmlns="http://www.w3.org/2000/svg">
<!--<circle id="CS1_01-intro" cx="32" cy="32" r="25" fill="rgba(0,0,0,.3)"/>-->
<path id="CS1_01-intro" d="M57,32A25,25 0 0 1 7,32 A25,25,0 0 1 57,32z" />
<text class="spinner-text spinner-text__casestudy" font-size="16" fill="black">
<textPath xlink:href="#CS1_01-intro">Longform case study</textPath>
</text>
</svg>

Related

SVG text baseline position in Chrome not scale-invariant

I have an SVG containing the words "foo" and "bar":
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 200 200">
<text x="10px" y="10px" font-size="10px">
foo
</text>
<text x="10px" y="10px" font-size="10px" dominant-baseline="hanging">
bar
</text>
</svg>
And another SVG that is nearly identical, except the coordinate system is scaled down by a factor of 10:
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 20 20">
<text x="1px" y="1px" font-size="1px">
foo
</text>
<text x="1px" y="1px" font-size="1px" dominant-baseline="hanging">
bar
</text>
</svg>
In Safari and Firefox, these two SVGs produce approximately the same results on screen, but in Chrome the latter SVG has a large gap between the two lines of text.
Is this a bug? And is there a way to display my text that is compatible with all three browsers while still allowing me to use the viewBox settings I want?

SVG background image not working on iPhone 4?

I have an SVG that doesnt render on an iPhone 4 but appears to work fine on all other browsers. Im wondering if it could be the transform property not being supported?
<?xml version="1.0" encoding="UTF-8"?>
<svg width="38" height="38" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<title>Layer 1</title>
<use x="0.084832" y="-0.670279" transform="matrix(0.995734, 0, 0, 0.995734, -0.0756826, 1.1509)" xlink:href="#svg_2" id="svg_3"/>
<g id="svg_4"/>
</g>
<defs>
<symbol viewBox="0 0 40 40" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="svg_2">
<g id="svg_1">
<path d="m19.700001,11.2c-0.400002,-1.3 -0.6,-5 -1.6,-7.2c0,-0.1 0,-0.1 0,-0.2c-0.200001,-0.4 -0.4,-0.8 -0.800001,-1.1c0,0 0,0 0,0c-0.099998,-0.1 -0.199999,-0.1 -0.299999,-0.2c0,0 -0.1,0 -0.1,-0.1c0,0 0,0 -0.1,0c-0.299999,-0.1 -0.5,-0.2 -0.799999,-0.3c-1.6,-0.3 -3.1,0.7 -4.9,2c-1.700001,1.2 -3.8,1.8 -5.400001,2.1c-2.5,0.3 -3.7,0.6 -4.4,1c0,0 0,0 0,0c-0.2,0.1 -0.3,0.2 -0.4,0.3c0,0 0,0 -0.1,0c-0.1,0.1 -0.1,0.2 -0.2,0.3c-0.2,0.2 -0.3,0.4 -0.4,0.599999c0,0 0,0 0,0.1c-0.1,0.2 -0.2,0.5 -0.2,0.8c0,0.3 0,0.7 0.2,1c0,0 0,0.099999 0.1,0.099999c0.6,1.900001 2.5,4.3 3.4,6.200001c1.3,2.699999 2.1,4.5 3.1,5.4c0.9,0.799999 3.2,2.299999 6.4,4.4c3.599999,1.6 5.2,-0.9 5.500001,-2.199999c0.299999,-1.200001 1.299999,-4.700001 1.699999,-6.300001c0.4,-1.6 -0.199999,-5 -0.699999,-6.7l0,0zm-5.400001,-0.599999c0.5,-0.3 1.4,-0.5 2.3,-0.3c-0.200001,0.7 -0.6,1.4 -1.400001,1.9c-0.8,0.5 -1.3,0.400001 -2,0.1c0,-0.6 0.2,-1.2 1.1,-1.7l0,0zm-6.5,4.299999c-1,0.200001 -1.7,-0.099999 -2.3,-0.5c0.6,-0.7 1.4,-1.2 2,-1.299999c1,-0.200001 1.5,0.099999 1.9,0.599999c-0.4,0.6 -0.7,1 -1.599999,1.2l0,0zm6.8,7.1c-2.1,0.799999 -4.5,-0.200001 -5.200001,-2.299999c-0.099999,-0.200001 -0.099999,-0.400002 -0.2,-0.700001c1,1.6 3,2.299999 4.900001,1.6c1.9,-0.700001 3,-2.6 2.699999,-4.4c0.1,0.199999 0.200001,0.4 0.300001,0.599998c0.799999,2.1 -0.4,4.400002 -2.5,5.200001l0,0z" fill="#B39C0B" id="svg_5"/>
<path d="m40,21.6c0,-0.1 0,-0.200001 0,-0.300001c0,0 0,-0.099998 0,-0.099998c0,0 0,0 0,-0.1c-0.099998,-0.300001 -0.200001,-0.6 -0.400002,-0.800001c-0.799999,-1.299999 -2.599998,-1.799999 -4.799999,-2.199999c-2.099998,-0.4 -3.9,-1.6 -5.299999,-2.5c-1.9,-1.6 -2.9,-2.3 -3.700001,-2.5c0,0 0,0 0,0c-0.199999,0 -0.299999,-0.1 -0.5,-0.1c0,0 0,0 -0.099998,0c-0.1,0 -0.200001,0 -0.300001,0c-0.299999,0 -0.5,0.1 -0.699999,0.2c0,0 0,0 -0.1,0c-0.300001,0.1 -0.5,0.2 -0.700001,0.400001c-0.299999,0.2 -0.5,0.5 -0.6,0.799999c0,0 0,0.1 -0.099998,0.1c-1,1.799999 -1.400002,4.799999 -2.1,6.700001c-1,2.799999 -1.700001,4.599998 -1.700001,5.9c0,1.199999 0.5,3.9 1.200001,7.699999c1.299999,3.700012 4.199999,3.100002 5.4,2.5c1.1,-0.599991 4.299999,-2.299988 5.700001,-3.099991c1.5,-0.799999 3.5,-3.600008 4.399998,-5.100008c0.700001,-1.200001 3.200001,-3.9 4.200001,-6.099991c0,-0.1 0.100002,-0.1 0.100002,-0.20001c0,-0.29999 0.099998,-0.699999 0.099998,-1.199999c0,0 0,0 0,0l0,0zm-14.799999,-0.200001c0.9,0.4 1.299999,1.1 1.5,1.800001c-1,0.199999 -1.900002,0.099998 -2.300001,-0.200001c-0.9,-0.4 -1.1,-1 -1.1,-1.6c0.5,-0.299999 1,-0.4 1.900002,0l0,0zm3.599998,11.800001c-0.099998,0.200001 -0.199999,0.399998 -0.4,0.599998c0.6,-1.799999 -0.299999,-3.799999 -2.1,-4.799999c-1.799999,-0.9 -4,-0.4 -5.099998,1.1c0.099998,-0.200001 0.099998,-0.4 0.199999,-0.700001c1,-1.9 3.4,-2.699999 5.5,-1.699999c2,1.099998 2.9,3.5 1.9,5.5zm3.200001,-6.400002c-0.5,-0.199999 -1.200001,-0.799999 -1.700001,-1.599998c0.700001,-0.300001 1.400002,-0.400002 2.299999,-0.1s1.200001,0.799999 1.300003,1.5c-0.5,0.4 -1,0.6 -1.900002,0.199999l0,0z" fill="#B39C0B" id="svg_6"/>
</g>
</symbol>
</defs>
</svg>
Ive tried using all of these optimizers:
https://jakearchibald.github.io/svgomg/
http://petercollingridge.appspot.com/svg-editor
https://www.npmjs.com/package/gulp-svgmin
Im using spritesmith. When I view the generated sprite on an iPhone 4 most of the icons are there but my problem SVG is not visible.
https://www.npmjs.com/package/gulp-spritesmith
Here is my full sprite, funnily enough the dropbox viewer also doesn't render all of the icons. If you save the svg and open it in Chrome you will see all of them: https://www.dropbox.com/s/3o981ljy0cs9ued/sprite-d5c1601f.svg?dl=0
UPDATE - Saving the file with Illustrator fixes this issue however it would still be nice to have an automated solution or linting to provide a warning for future files.

Try moving the <defs> section before the <use>. IIRC older Safari/Webkit had a bug with forward references.
Ie. rearrange the file so the order of tags looks like this:
<svg>
<defs>
<symbol>
</defs>
<g>
<use>
</g>
</svg>

Zoom SVG images on iBooks

not able to zoom SVG images in iBooks for iPad (epub3.0 fixed layout) when using rect or circle:
<svg version="1.1" viewBox="0 0 2048 2048" preserveAspectRatio="xMidYMid meet">
<g id="viewport" transform="translate(200,200)">
<g style="fill: #ffffff; stroke:#000000">
<rect width="2048" height="2048" style="fill:green; stroke:black" />
<circle cx="1024" cy="1024" r="1024" style="fill:black; stroke:black" />
<!--path d="M 0 0 H 2048 V 2048 H 0 Z"/-->
</g>
</g>
</svg>
Image is zoomable when using path:
<svg version="1.1" viewBox="0 0 2048 2048" preserveAspectRatio="xMidYMid meet">
<g id="viewport" transform="translate(200,200)">
<g style="fill: #ffffff; stroke:#000000">
<!--rect width="2048" height="2048" style="fill:green; stroke:black" /-->
<!--circle cx="1024" cy="1024" r="1024" style="fill:black; stroke:black" /-->
<path d="M 0 0 H 2048 V 2048 H 0 Z"/>
</g>
</g>
</svg>
Any idea?
Thanks

Well, I don't have a solution, but I have similar/identical behavior.
I have four SVG images in an ePub3.0 that passes all ePubcheck, loads fine on the Mac using iBooks, and synchs to an iPad fine using iTunes, and displays fine on the iPad
Three of the SVG images also zoom fine on both Mac and iPad (click on the image to zoom it)
One of the SVG images sort of blows up on the Mac. You only see the lower left portion of it.
The same problem SVG image won't zoom at all on the iPad. The iPad simply skips to the next page
The problem SVG image does NOT have any rect or circle elements. It is all paths. However, it is more complicated, especially since I turned all text into paths to sidestep the !#$$ fonts problems.
All four images are drawn in Inkscape, saved as "Plain SVG" and then edited with a text editor to remove the metadata element that ePub/Kindle does not seem to like.
Like you, I am scratching my head. I am about to throw in the towel and simply render everything as large PNGs.

SVG rotate text with % as Unit

I try to rotate a svg text. i get the position of the text as % i.e. 15% by calling a php function from xslt. the problem is that i can not rotate a svg object using %. it works if i use a digit number instead.
Below i present the problem as simplified:
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://ww.w3.org/2001/xml-events" xmlns:php="http://php.net/xsl" version="1.1" baseProfile="full">
<text x="50%" y="50%" transform="rotate(-90 50% 50%)">rotateMe</text>
<line x1="50%" y1="47%" x2="60%" y2="47%" stroke="black" stroke-width="2px"/>
</svg>
this pic is in the middle of my browser screen
And i want that it looks like this:
but it dont work because of %
transform="rotate(-90 **50% 50%**)"
it is a requirement for me to use % for the coordinates. Any ideas or solution to my problem?
Thank you in advanced.

You can translate the co-ordinates using an inner <svg> element. The example below displays as per your "i want that it looks like this" bitmap on Firefox.
If you can't see the text on whatever browser you are using, try adding overflow="visible" to the inner <svg> element so you can see where it ends up. Not all browsers support the dominant-baseline attribute so you may need to fiddle about with the text's y attribute instead.
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg x="50%" y="50%" width="100" height="100">
<text text-anchor="end" dominant-baseline="text-before-edge" transform="rotate(-90 0 0)">rotateMe</text>
</svg>
<line x1="50%" y1="47%" x2="60%" y2="47%" stroke="black" stroke-width="2px"/>
</svg>

Scale a svg text to fit an exact width or the parent container width [duplicate]

This is likely a very simple question, but how do I get text in SVG to stretch to fit its container?
I don't care if it looks ugly from being stretched too long or high, but it needs to fits its container and be as big as possible.
Thanks

If you really don't care that the text gets ugly, here's how to fit unknown length text into a known width.
<svg width="436" height="180"
style="border:solid 6px"
xmlns="http://www.w3.org/2000/svg">
<g>
<text y="50%" textLength="436" lengthAdjust="spacingAndGlyphs">UGLY TEXT</text>
</g>
</svg>

Here is what I have come up with... Its similar to what other people have posted, but I think it resizes and scales nicely. This code will add spacing to any text roughly between 10-25 characters to make it fill the entire width of its parent. If you need longer or shorter text, just adjust the viewBox width and textLength attributes.
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox='0 0 300 24'>
<text textLength='290' lengthAdjust="spacing" x='5' y="14" >
Some Unknown Text that is resizing
</text>
</svg>

Maybe this could work for you. You'd have to tweak the values, but it does resize when the parent div resizes. Here's my dabblet example. It works similarly to fittext.js
I used the ‘viewBox’ & ‘preserveAspectRatio’ attributes.
<svg><text x="50%" y="50%" dy=".3em">Look, I’m centered!</text></svg>
<svg viewBox="-50 -50 100 100" preserveAspectRatio="xMidYMid meet"><text font-size="16" dy=".3em" >I’m also resizeable!</text></svg>
other resources I looked at:
Making Sense of SVG viewBox's Madness
How to Style Scalable Vector Graphics Using CSS

You can use the textPath tag in conjunction with the text tag. If you then set the lengthAdjust attribute of the textPath tag to "spacingAndGlyphs" (you may additionally use the method attribute and set it to "stretch" to adjust the rendering method).
Example:
<div style="width: 100%">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 100"
style="border:solid 6px"
xmlns="http://www.w3.org/2000/svg">
<g>
<path id="svg-text" d="M 10 50 H 180" fill="transparent" stroke="lightgray" />
<text>
<textPath
xlink:href="#svg-text"
method="stretch"
lengthAdjust="spacingAndGlyphs"
>Beautifully resized!</textPath>
</text>
</g>
</svg>
<div>

Resources