Zoom SVG images on iBooks - svg

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.

Related

SVG Text does not render in Chrome or Safari

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>

An SVG having only definitions for another scaling SVG still needs to scale?

My SVG is width="1200" height="600" viewBox="0 0 1200 600". It uses a clipPath from defs of another SVG.
<svg class="svg-def">
<defs>
<clipPath id="clip-1"> ...
</defs>
</svg>
<svg width="1200" height="600" viewBox="0 0 1200 600">
<g clip-path="url(#clip-1)">
...
</g>
</svg>
Demo
When .svg-def does not have width="1200" height="600" viewBox="0 0 1200 600" (the first image), on window width narrower than 1200, the right side is clipped. This is not desired.
I want the second image -- the clip is just the size of the SVG. The second image is good because the <clipPath> being used is from an <svg> element with the same width="1200" height="600" viewBox="0 0 1200 600"
<svg class="svg-def">
<defs>
<clipPath id="clip-1"> ...
</defs>
</svg>
<svg class="svg-def" width="1200" height="600" viewBox="0 0 1200 600">
<defs>
<clipPath id="clip-2"> ...
</defs>
</svg>
Questions
1) In <clipPath> <rect width="100%" height="100%"/>, what is 100% relative to?
2) The first clip's display width varies with window width (when the latter is narrow than 1200px). Narrower window width = narrower display width. What is the display width relative to?
3) So if I have an SVG which has only <defs>, its <svg> tag still has to have viewbox values, so that the other SVG which uses the definitions (and which scales with window width) can have definitions in correct sizes?

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>

How do you render SVG in a different size in HTML?

Given this svg:
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g>
<title>Layer 1</title>
<ellipse stroke="#000000" ry="210.999999" rx="259.000004" id="svg_1" cy="237.727263" cx="324.999989" stroke-width="5" fill="#FF0000"/>
</g>
</svg>
How do I scale it to user 320x240 without having to recompute the numbers inside? Is this even possible?
Add viewBox="0 0 640 480" and set width="320" height="240" to the <svg> element to scale the SVG. you can go crazy on the width and height and control the aspect ratio with the preserveApsectRatio attribute.
Use the viewBox attribute to control what you can see in the page. Alternately wrap the content in a <g> element and set a scale transform of 0.5 on it.

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