converting svg to base64 url - svg
i need an icon url for my project and i have an svg file such as :
<svg viewBox='-100 -100 200 200'>
<g transform='rotate(-90)'>
<path d='M0,0 L61.73,-38.268 A100,75 0 0,1 61.73,38.268 Z' fill='param(fill) #FFFFFF' stroke='param(outline) #000000' stroke-width='param(stroke-width) 0.25'/>
</g>
</svg>
i converted this svg to base64 by using online converter as :
PHN2ZyB2aWV3Qm94PSctMTAwIC0xMDAgMjAwIDIwMCc+PGcgdHJhbnNmb3JtPSdyb3RhdGUoLTkwKSc+PHBhdGggZD0nTTAsMCBMNjEuNzMsLTM4LjI2OCBBMTAwLDc1IDAgMCwxIDYxLjczLDM4LjI2OCBaJyBmaWxsPSdwYXJhbShmaWxsKSAjRkZGRkZGJyBzdHJva2U9J3BhcmFtKG91dGxpbmUpICMwMDAwMDAnIHN0cm9rZS13aWR0aD0ncGFyYW0oc3Ryb2tlLXdpZHRoKSAwLjI1Jy8+PC9nPjwvc3ZnPg==
https://jsfiddle.net/2Logkd37/
but it just doesnt work. can someone explain what is wrong with this?
Related
Hebrew text on SVG textPath reversed only in Safari
When putting Hebrew text on an SVG textPath it is reversed only in Safari (macOS ventura 13.2 Safari 16.3). It is OK in Firefox and Chrome. Text that is NOT on a path is always OK. Furthermore, I am able to use bidi-override to reverse the text in Firefox/Chrome, but in Safari that did not un-reverse the reversed text as I expected (and even if it did that would not be a cross-browser solution). I also tried playing with various rtl/ltr css/html/svg dir/direction settings as well as lang/xml:lang he. I can of course reverse the text string in advance for Safari, but I am looking for a cross-browser solution. This is a similar question, but the author is not addressing the browser-specific issue (I think at the time it was also broken in Chrome so he could just reverse the string in advance for both), and the accepted answer is not offering a concrete explanation nor is it helpful practically: RTL text (Hebrew) shows reversed when is on SVG path Chrome: Safari: <html dir="rtl" lang="he"> <svg viewBox="0 0 1000 1000" width=500" xmlns="http://www.w3.org/2000/svg"> <path id="MyPath1" fill="none" stroke="red" d="M 500, 120 m 0, -110 a 110,110 0 0,1 0,320 a 110,110 0 0,1 0,-320" /> <path id="MyPath2" fill="none" stroke="green" d="M 200, 120 m 0, -110 a 110,110 0 0,1 0,320 a 110,110 0 0,1 0,-320" /> <text x='600' y='200'> text not on path is ok טקסט רגיל </text> <text> <textPath href="#MyPath1" text-anchor="end">hebrew textpath reversed only on safari טקסט על מסלול הפוך רק בספארי</x> </text> <text unicode-bidi="bidi-override" direction="ltr"> <textPath href="#MyPath2">טקסט על מסלול הפוך תמיד hebrew textpath always reversed</textPath> </text> </svg> </html> codepen: https://codepen.io/eyaler/pen/VwBBOXz?editors=1011
Got it! Since Safari is just ignoring all bidi stuff on textPath, that is, both the logical direction and the bidi-override, I can just reverse the string in advance AND do unicode-bidi="bidi-override" direction="ltr"! Double negatives to the rescue! This is a cross-browser solution. <html dir="rtl" lang="he"> <svg viewBox="0 0 1000 1000" width=500" xmlns="http://www.w3.org/2000/svg"> <path id="MyPath1" fill="none" stroke="red" d="M 500, 120 m 0, -110 a 110,110 0 0,1 0,320 a 110,110 0 0,1 0,-320" /> <path id="MyPath2" fill="none" stroke="green" d="M 200, 120 m 0, -110 a 110,110 0 0,1 0,320 a 110,110 0 0,1 0,-320" /> <text x='600' y='200'> text not on path is ok טקסט רגיל </text> <text> <textPath href="#MyPath1" text-anchor="end">hebrew textpath reversed only on safari טקסט על מסלול הפוך רק בספארי</x> </text> <text unicode-bidi="bidi-override" direction="ltr"> <textPath href="#MyPath2">רדסב גצומו רוקמב יתכפהש לולסמ לע טסקט hebrew textpath hardcoded reversed to display ok on all browsers</textPath> </text> </svg> </html>
Space between SVG and path
I am using SVG to clip an image to the shape of SVG.The screenshot I have attached is of chrome(first) and IE(second).In IE it looks very small in size.The issue is I find space between the SVG and path. I have tried out many combinations of viewBox but nothing worked out.I even scaled my SVG to 1*1 even then I am facing this issue. <div> <svg class="svg-graphic" width="100%" height="100%" viewBox="35 35 1000 1000" xmlns="http://www.w3.org/2000/svg" > <g> <clipPath id="arch-mask" > <path class="st0" d="M905.33,324.23c0-4.36-3.42-7.48-7.89-7.89c-72.15-3.95-130.16-61.96-134.11-134.11 c-0.18-4.35-3.53-7.89-7.89-7.89H297.89c-4.36,0-7.48,3.42-7.89,7.89c-3.95,72.15-61.96,130.16-134.11,134.11 c-4.35,0.18-7.89,3.53-7.89,7.89v457.55c0,4.36,3.42,7.48,7.89,7.89c72.15,3.95,130.16,61.96,134.11,134.11 c0.18,4.35,3.53,7.89,7.89,7.89h457.55c4.36,0,7.48-3.42,7.89-7.89c3.95-72.15,61.96-130.16,134.11-134.11 </clipPath> </g> <image clip-path="url(#arch-mask)" height="100%" width="100%" xlink:href="https://picsum.photos/id/1003/500/500" /> </svg>
You have a few errors in your code like the path that isn't closing. I've changed the viewBox of the svg element so that you have no spaces between the clipping path and the borders of the svg element. Also I've changed the size and the position of the image to be the same as the bounding box of the clipping path. To get the bounding box you can use the getBBox() method.
In javaScript you'll find commented out the bounding box of the path inside the clipping path.
/*let bb = document.querySelector("#arch-mask path").getBBox();
console.log(bb)*/
svg{border:solid}
<svg class="svg-graphic" width="100%" height="100%" viewBox="148 174 757.33 757.33" xmlns="http://www.w3.org/2000/svg" >
<g>
<clipPath id="arch-mask" >
<path class="st0" d="M905.33,324.23c0-4.36-3.42-7.48-7.89-7.89c-72.15-3.95-130.16-61.96-134.11-134.11
c-0.18-4.35-3.53-7.89-7.89-7.89H297.89c-4.36,0-7.48,3.42-7.89,7.89c-3.95,72.15-61.96,130.16-134.11,134.11
c-4.35,0.18-7.89,3.53-7.89,7.89v457.55c0,4.36,3.42,7.48,7.89,7.89c72.15,3.95,130.16,61.96,134.11,134.11
c0.18,4.35,3.53,7.89,7.89,7.89h457.55c4.36,0,7.48-3.42,7.89-7.89c3.95-72.15,61.96-130.16,134.11-134.11"/>
</clipPath>
</g>
<image clip-path="url(#arch-mask)" x="148" y="174" width="757.33" height="757.33" xlink:href="https://picsum.photos/id/1003/500/500" />
</svg>
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>
external referenced image in svg not showing when converted to base64 and embedded in img tag
I have one svg image. First I converted that image to base64 string. Then I am showing that base64 svg string in img tag. Problem is when i am referenced svg file, image in svg is showing. But on converting it to base64 it is not showing. Issue is only in mozilla. <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iN2luIiBoZWlnaHQ9IjRpbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHJlY3Qgc3R5bGU9InBvaW50ZXItZXZlbnRzOm5vbmUiIGZpbGw9IiNGRkYiIHN0cm9rZT0iIzAwMCIgeT0iMCIgeD0iMCIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSI+PC9yZWN0PgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxyZWN0IGZpbGw9IiNGRjAwMDAiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSI1IiB4PSIxMjIzIiB5PSIxMDIxIiB3aWR0aD0iNDM0IiBoZWlnaHQ9IjIzMCIgaWQ9InN2Z18yIi8+CiAgPHJlY3QgZmlsbD0iI0ZGMDAwMCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjUiIHN0cm9rZS1kYXNoYXJyYXk9Im51bGwiIHN0cm9rZS1saW5lam9pbj0ibnVsbCIgc3Ryb2tlLWxpbmVjYXA9Im51bGwiIHg9IjExOTciIHk9IjEwMTciIHdpZHRoPSI0MTUiIGhlaWdodD0iMjMxIiBpZD0ic3ZnXzQiLz4KICA8cmVjdCBpZD0ic3ZnXzYiIGhlaWdodD0iMTIiIHdpZHRoPSIyNCIgeT0iMTI5MyIgeD0iMTQ2NiIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2U9IiMwMDAwMDAiIGZpbGw9IiNGRjAwMDAiLz4KICA8cmVjdCBmaWxsPSIjRkYwMDAwIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iNSIgeD0iMTg5IiB5PSI0NCIgd2lkdGg9IjE1MyIgaGVpZ2h0PSIxMDciIGlkPSJzdmdfMSIvPgogIDxyZWN0IGZpbGw9IiMwMGZmZmYiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2UtZGFzaGFycmF5PSJudWxsIiBzdHJva2UtbGluZWpvaW49Im51bGwiIHN0cm9rZS1saW5lY2FwPSJudWxsIiB4PSIxNzMiIHk9IjE1NyIgd2lkdGg9IjE5NCIgaGVpZ2h0PSI2MiIgaWQ9InN2Z18zIi8+CiAgPHJlY3QgaWQ9InN2Z181IiBoZWlnaHQ9IjczIiB3aWR0aD0iMzA4IiB5PSIyMjAiIHg9IjExOCIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2U9IiMwMDAwMDAiIGZpbGw9IiNGRjAwMDAiLz4KICA8aW1hZ2UgeD0iMjE5IiB5PSIzNyIgd2lkdGg9IjQwMCIgaGVpZ2h0PSIyNjciIGlkPSJzdmdfNyIgeGxpbms6aHJlZj0iaHR0cDovL3QyLmZ0Y2RuLm5ldC9qcGcvMDAvNTUvOTkvNzUvNDAwX0ZfNTU5OTc1MzZfalRHVGdJMXJZQzhnb2xiSUF1ejNiR01zdDVBaHdUOVYuanBnIi8+CiAgPGltYWdlIHhsaW5rOmhyZWY9ImRhdGE6aW1hZ2UvanBlZztiYXNlNjQsLzlqLzRBQVFTa1pKUmdBQkFRQUFBUUFCQUFELy9nQTdRMUpGUVZSUFVqb2daMlF0YW5CbFp5QjJNUzR3SUNoMWMybHVaeUJKU2tjZ1NsQkZSeUIyTmpJcExDQnhkV0ZzYVhSNUlEMGdOelVLLzlzQVF3QUlCZ1lIQmdVSUJ3Y0hDUWtJQ2d3VURRd0xDd3daRWhNUEZCMGFIeDRkR2h3Y0lDUXVKeUFpTENNY0hDZzNLU3d3TVRRME5COG5PVDA0TWp3dU16UXkvOXNBUXdFSkNRa01Dd3dZRFEwWU1pRWNJVEl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeS84QUFFUWdBUEFCUUF3RWlBQUlSQVFNUkFmL0VBQjhBQUFFRkFRRUJBUUVCQUFBQUFBQUFBQUFCQWdNRUJRWUhDQWtLQy8vRUFMVVFBQUlCQXdNQ0JBTUZCUVFFQUFBQmZRRUNBd0FFRVFVU0lURkJCaE5SWVFjaWNSUXlnWkdoQ0NOQ3NjRVZVdEh3SkROaWNvSUpDaFlYR0JrYUpTWW5LQ2txTkRVMk56ZzVPa05FUlVaSFNFbEtVMVJWVmxkWVdWcGpaR1ZtWjJocGFuTjBkWFozZUhsNmc0U0Zob2VJaVlxU2s1U1ZscGVZbVpxaW82U2xwcWVvcWFxeXM3UzF0cmU0dWJyQ3c4VEZ4c2ZJeWNyUzA5VFYxdGZZMmRyaDR1UGs1ZWJuNk9ucThmTHo5UFgyOS9qNSt2L0VBQjhCQUFNQkFRRUJBUUVCQVFFQUFBQUFBQUFCQWdNRUJRWUhDQWtLQy8vRUFMVVJBQUlCQWdRRUF3UUhCUVFFQUFFQ2R3QUJBZ01SQkFVaE1RWVNRVkVIWVhFVElqS0JDQlJDa2FHeHdRa2pNMUx3RldKeTBRb1dKRFRoSmZFWEdCa2FKaWNvS1NvMU5qYzRPVHBEUkVWR1IwaEpTbE5VVlZaWFdGbGFZMlJsWm1kb2FXcHpkSFYyZDNoNWVvS0RoSVdHaDRpSmlwS1RsSldXbDVpWm1xS2pwS1dtcDZpcHFyS3p0TFcydDdpNXVzTER4TVhHeDhqSnl0TFQxTlhXMTlqWjJ1TGo1T1htNStqcDZ2THo5UFgyOS9qNSt2L2FBQXdEQVFBQ0VRTVJBRDhBNStSQUltN2RxdDZINFd2ZGN2VmxqVVEyVWJEemJpVDdxNDdEMWIyRlB0YlQ3Yk9rTzhJR1BMSHNLNnJ4VEhLTkp0Tk10SmpEYlc2WkNJdkxudVRtdU9DdWRMMkpvb1BER2orWW9hTy91TVkvZkVGZndVZFBxU2FoZlhOSHRJWlRKNGR0cFlqZzc0WFlFZHNjbmpyWGswZm5uV0FzYzNtK1cvellHUVBvSzZiWHZFc2VtTEhGQ1V5b0RNUXBPVGpJQkJ6My9XdDFGR1RaMk4zNGZqbWVHNTA1aEpaemtkT3NXZXhIOGpXNXJJZzBiU0lyZUFBU0VZK3RjMzhPNys4dExON3k1RWpOSzJJZzR6dEJPZW5VZGZ3RmRYcUhpT2R6aWJUNDVWeG5jMFFLakp4M0dheWxUVnpTTXJJNGlkRWExUmxQekU0WWVuT2FydzZmTmR5Q0tDSm5jOWdLN2RKdkRyZkplV0Nvd0dTVlpsSlBzTTF6V3UrSWJUVHIyenNkSUVrVWR3NTNzamdzMlBmMHlPM3ZVeHBNbGpiYnd2cTBEbVdTeG5YNVR0K1R2MnJIdjdTNGlsSXVZNUVrOUhCQnJWMWp4QnFlbTJKbGt0NEdqTERhV085ajZuMC93cXhwWGlPdzF5TnJDOHRpUklBVWRkdTROZ0U3ZlQzcS9aTGNrNTYwdVRheWVZcHd3RmJPb3hYOXhwUW5uRHhoa3lBMlI4dmJKNzF5dDlxZDFiNlIvYWtySkhPTnJNNGpHRjVHTUQxL3dycnZCbXQySGlxYVRUb2J5NUpNZVZOempFait2c2ZiNjBvTHFhelZrb25LNkRvMHFUVDNMZVZsVGtKSXVTQWUrTzFRYVI0VG0xN3g0WGNNOXRBQTVQWjVNOEQrZjVWM1UzaDZQU3BaeE5PNGxkc05HZnZBL3dCYXR1OFhnalRFbkFtZHIrZFlneWo1OXpBN2NjSHBnL25XaW10a1o4ajNaMDRzOU8wK0g3SkQ4MlFGenRHQ0JnL1Vpbnl5d05CR3JPbThyeUY3bi9JTll0eGZXbGdycmVKUGRYY293WTRVQmJIZGljZ0FmajlLeXpxdG5MYU5jMjB4Q2NqYXd3eUVkVkk3R21BL1hiYU5MTjJTTDV5QUVVTnpnRHFPZWY4QVBwWGkrdXZkMldzUkdacEdtUnkwVG94R0FUeUFhOVpoMWM2Z2lyTWdqVldCQkQ4c09PUUs0ZnhEb2tFdW9wY3lsMFFFUHU1K1U4Wi9XbXR5Wk82S1Y1YjZ6Y1dTWGh1UEx0bWpDYkNtTnc5UWEwZkI4TnhiMzhUL0FDTkRIbHNyOTdKNHorRmRJbHdJL0QxenNaSkl4RVA5YjY0NFBURlZ2QzJuckpLdDQ2ZVhGbk1tZXFzT0RqL1BTbTBKUG9jeDhRdFJqa2puc1lRQkh2QndQYXVYOEszMm8rSHZFRVlSSGlrYmE1QkhicURXbGNXamFycjF0Q3pGaE5LTjMwNm45QWE3cTkwcUdaaGM3RkVrYTR5ZWhVZGpXRVpLSzVUcHF4Y256SGVhWjR6MHp4Q3NVT3Iyb0V5QWVYTU9Hei9uSEZRYTg5N2U2NWJhWFpUQUNUSGxOdHpqR2MvU3NmdzdwOWxNNFdVRVo0VWpzYTJOYzBxN3NvRXVRZHpLckp2QjI0ejA1SFFVMDF6R2RueW5uWGlIeDlDbXYzVnZCUGtKSVl6SW5Sc2NaL1NxMGVvSk5idmZ3UnZOQnZIbTQvaWJCNVA2RE5jcDRoOEgzbW42bXFwRVdpa1FQdlE1Qnp5TVo5cTZ6dzdmeGFKcDBlaXRCL3Bjc2JTUEk0REtvN0w5YTJ1akpwbHpSb0lwdFFudkpMbVVSekxoTFk5SXp3U1JnNEhRVnNYdHV0MWJLSk9wYmMyRDBKNjF6ZWx5UVd0eSt3S2Q3Zkx4MDVQOWF0NnhyUzJXbWxFa1VUU2t4b1Q3OVQrQS9wU0E2R3dsMC9VZElLcGhvem1HVlIvc0hqK241MHMxd2kyNHRvRjJ4cWVudDAvcFhEYUJyWnM3bFU1RnU0L2VMakFQUVorditGZGxzVmlDaHlwR1FmVVZsVnVqYW5abUJvK293MnR5bWpwQkc5eXVXbWJabGcyRGdBK3c0cWJ4Sk5kR3greHhJd2FVWmNyeVFQU3ZhTEx3Ym9hM3gxS08wRWQxS0dEc2h4bjhLOGs4UWFjbGhmYXNZcDVtSllnYml2SEhiQUZUTFRWRncxZG1ZL2hEeFBLWWpCY1pFc0w3QS9UUC93QmV2WjlQMVczMUxSSlV1TmhSaytjdWVBUDhPQlhqOWhwZHRGNGFCQUpjbHBpNTY3c2tmMHJRKzMzRnY0V3VHUi80UXB6M0ZEVjJUdG9VUEZHcmFkWnRLbHBxU3p4b1Q1WXdXSyt3T09hNGFQWFlvNUpHTFBKTEoxa1lIUDBxTFZTVXZsYk9kNFptRGNqZ1ovTG1wVGF3aVJ5SXhsWFpSK0dQOGEzNVRCc21nMS95L3dEajNnY3NRUUF4d1ByVk4zdWJtNlY3aHkwbkdBT0FQOG1wWTRVVURia0J1TUE0eDEvd3FDUmkwcmduaFR4VHRZVnkvSE1WWGJ0QUs5RzlhNzd3N2RpNDB1RU1TWFFGVGsvNTlhOHo1L3ZOa0RJT2VhN3J3c3hHbS9SeUt6cTdHbFBjLzlrPSIgaWQ9InN2Z184IiBoZWlnaHQ9IjYwIiB3aWR0aD0iODAiIHk9IjU0IiB4PSI0NiIvPgogIDxpbWFnZSB4bGluazpocmVmPSJkYXRhOmltYWdlL2pwZWc7YmFzZTY0LC85ai80QUFRU2taSlJnQUJBUUFBQVFBQkFBRC8vZ0E3UTFKRlFWUlBVam9nWjJRdGFuQmxaeUIyTVM0d0lDaDFjMmx1WnlCSlNrY2dTbEJGUnlCMk5qSXBMQ0J4ZFdGc2FYUjVJRDBnTnpVSy85c0FRd0FJQmdZSEJnVUlCd2NIQ1FrSUNnd1VEUXdMQ3d3WkVoTVBGQjBhSHg0ZEdod2NJQ1F1SnlBaUxDTWNIQ2czS1N3d01UUTBOQjhuT1QwNE1qd3VNelF5LzlzQVF3RUpDUWtNQ3d3WURRMFlNaUVjSVRJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qSXkvOEFBRVFnQVBBQlFBd0VpQUFJUkFRTVJBZi9FQUI4QUFBRUZBUUVCQVFFQkFBQUFBQUFBQUFBQkFnTUVCUVlIQ0FrS0MvL0VBTFVRQUFJQkF3TUNCQU1GQlFRRUFBQUJmUUVDQXdBRUVRVVNJVEZCQmhOUllRY2ljUlF5Z1pHaENDTkNzY0VWVXRId0pETmljb0lKQ2hZWEdCa2FKU1luS0NrcU5EVTJOemc1T2tORVJVWkhTRWxLVTFSVlZsZFlXVnBqWkdWbVoyaHBhbk4wZFhaM2VIbDZnNFNGaG9lSWlZcVNrNVNWbHBlWW1acWlvNlNscHFlb3FhcXlzN1MxdHJlNHVickN3OFRGeHNmSXljclMwOVRWMXRmWTJkcmg0dVBrNWVibjZPbnE4Zkx6OVBYMjkvajUrdi9FQUI4QkFBTUJBUUVCQVFFQkFRRUFBQUFBQUFBQkFnTUVCUVlIQ0FrS0MvL0VBTFVSQUFJQkFnUUVBd1FIQlFRRUFBRUNkd0FCQWdNUkJBVWhNUVlTUVZFSFlYRVRJaktCQ0JSQ2thR3h3UWtqTTFMd0ZXSnkwUW9XSkRUaEpmRVhHQmthSmljb0tTbzFOamM0T1RwRFJFVkdSMGhKU2xOVVZWWlhXRmxhWTJSbFptZG9hV3B6ZEhWMmQzaDVlb0tEaElXR2g0aUppcEtUbEpXV2w1aVptcUtqcEtXbXA2aXBxckt6dExXMnQ3aTV1c0xEeE1YR3g4akp5dExUMU5YVzE5aloydUxqNU9YbTUranA2dkx6OVBYMjkvajUrdi9hQUF3REFRQUNFUU1SQUQ4QThrZGFnZGF0dUtnY1Y5Wk9CNU1KRlJscUZoVnRseWFpYU0rMzUxeXpqWTZZTzVVWVZHUlZsb3o2VkV5SDBOYzhrYnE1RlJTbFQ2R2pCck1zU2twMlBjVWh4OWFWd3NkRTVxYlRMTCswTHdSRWtJQmxpUFNxa2hyb2ZCSWprMWd4eU56SXBVRDFQWCtocnN6cXZQRDRLZFNudXY4QU01OHZveHFWNHhsc0t1bFd0eGNyWjJrSkUwcENLeGJPU2ZidCtZcXpOOE5mRVB6ckRhUnV5RTUvZkwyT09PMzg2OUswN3dMWVR6eDZnMXhQSGR4T3NrYXhzT01kaHgwUEdmNlZxNnkwME1sc2xta2NnRzVHWDd4VWpzY2NEbjNyNUNobWNyUmNKTjMzdnJxZTdVdzhXMm1rdlRUUThTaDhBNm95aDcrV0t3ajJsbWFZbjVWSGNnRHBXWGRlRTlSZzFTU3hVUlNzaTdqSWpaVEgxcjN5U0tDOXRDOTFjVzdSUUR6ZktRZFFCeVR6MlA4QUt1WDFqN0RlVzBPbTZoSGNhZTVrMlFUMm93QVJ5RHgySS9sWHAwOGZPYjk1SEhQRHFLOTA4WnU5RDFHemg4NmUwbVdIcjVnWGNwSHJrY1ZtbmpwK3RlbnY0VzFiU05kOHU5MTc5eTdCbUc0Z3l4SEEzQlQ4cDVQVFBhdWUxcndyWmFQcWp3WGQ2eEUrUHMza3g0NUo2a04wVWNmMDlhNm8xNHQydmYwTWVScm9jZjE3MGhGYUdwNlBlYVRNMGR6R05vWXB2UTVVa2RzK3RaOWJKcHE2SWZtZEJJbEZuZFMyRjNIY1JNVlpHQkJIYkhlcmtrTlZuaDlxOSt2UWpWZzRUVjB6ektOZHhha3QwZWsySGpsNzFVUDJzUVRCY01OMkFmcC9oV1Q0ZzhhM0VWbzFwYTNLdThqNUx4akJBOWoycmhqR1ZPUVNENmltRkNUazhuM3I1YWh3dlJvMStmbWJpdGVVOXFlY1NuVDVlV3o3a28xQzZXUjNqdUpZeTZsV3c1NUI2ZysxYStnK0w3N1FwaHVWYnUzL0FPZVVySGcrcW5xUDVWZ2xhWXdyMnF1SHB1UEsxb2VlcTg3M3ZxZW4yZnhHc3Rjdm9kTnY5TGh0N2FRbU15eXZ2SkJ4Z0hqQTVHVDI0SHBtalUvRHNlcWViYXpUTkxFMjZSRHRJMlNBQTRWem5DbmtZT1FEWGxUWnE1YmE5cTFoQUliWFVMaUtFRW55dzUyNVB0MDdWNU5UQXFEdlJkanNqaU9iNDlUcjE4R1RTK0g5U21zYlM4aFF3cVZzcmdoM2FRSDd5a1l4am50MEo5Y1Y1NWMyczlwTTBOeEM4TXE4bEhYQkZkSC9BTUovNG9FRFJEVkcyc0NDZktUY1JqSFhHYXF5ZUpqZURHcTZiYTNqQ1BZSElNYmc1em5LbjhNREZaMG80aURmUFpyeTMvRXVicE5MbHVqYWVMMnFCNGZhdEoxRlFPb3I3aWNFZkp3cU16V2hxRm9xMFdVVkN5aXVhVURwalVabnRIVURKV2c2aW9IVVZ5emdieG1aN3BVTExWNTFGVjNBcmtuQTZvU0tiTGlvelZoeFVMVnlTUjBSWi8vWiIgaWQ9InN2Z185IiBoZWlnaHQ9IjYwIiB3aWR0aD0iODAiIHk9IjE1OCIgeD0iMzYiLz4KIDwvZz4KPC9zdmc+"> <svg width="7in" height="4in" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect style="pointer-events:none" fill="#FFF" stroke="#000" y="0" x="0" height="100%" width="100%"/> <g><title>Layer 1</title><rect fill="#FF0000" stroke="#000000" stroke-width="5" x="1223" y="1021" width="434" height="230" id="svg_2"/><rect fill="#FF0000" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="1197" y="1017" width="415" height="231" id="svg_4"/><rect id="svg_6" height="12" width="24" y="1293" x="1466" stroke-width="5" stroke="#000000" fill="#FF0000"/><rect fill="#FF0000" stroke="#000000" stroke-width="5" x="189" y="44" width="153" height="107" id="svg_1"/><rect fill="#00ffff" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="173" y="157" width="194" height="62" id="svg_3"/><rect id="svg_5" height="73" width="308" y="220" x="118" stroke-width="5" stroke="#000000" fill="#FF0000"/><image x="219" y="37" width="400" height="267" id="svg_7" xlink:href="http://t2.ftcdn.net/jpg/00/55/99/75/400_F_55997536_jTGTgI1rYC8golbIAuz3bGMst5AhwT9V.jpg"/><image xlink:href="data:image/jpeg;base64,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" id="svg_8" height="60" width="80" y="54" x="46"/><image xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NjIpLCBxdWFsaXR5ID0gNzUK/9sAQwAIBgYHBgUIBwcHCQkICgwUDQwLCwwZEhMPFB0aHx4dGhwcICQuJyAiLCMcHCg3KSwwMTQ0NB8nOT04MjwuMzQy/9sAQwEJCQkMCwwYDQ0YMiEcITIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIy/8AAEQgAPABQAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A8kdagdatuKgcV9ZOB5MJFRlqFhVtlyaiaM+351yzjY6YO5UYVGRVloz6VEyH0Nc8kbq5FRSlT6GjBrMsSkp2PcUhx9aVwsdE5qbTLL+0LwREkIBliPSqkhrofBIjk1gxyNzIpUD1PX+hrszqvPD4KdSnuv8AM58voxqV4xlsKulWtxcrZ2kJE0pCKxbOSfbt+YqzN8NfEPzrDaRuyE5/fL2OOO3869K07wLYTzx6g1xPHdxOskaxsOMdhx0PGf6Vq6y00MlslmkcgG5GX7xUjsccDn3r5ChmcrRcJN33vrqe7Uw8W2mkvTTQ8Sh8A6oyh7+WKwj2lmaYn5VHcgDpWXdeE9Rg1SSxURSsi7jIjZTH1r3ySKC9tC91cW7RQDzfKQdQByTz2P8AKuX1j7DeW0Om6hHcae5k2QT2owARyDx2I/lXp08fOb95HHPDqK908Zu9D1Gzh86e0mWHr5gXcpHrkcVmnjp+tenv4W1bSNd8u9179y7BmG4gyxHA3BT8p5PTPaue1rwrZaPqjwXd6xE+Ps3kx45J6kN0Ucf09a6o14t2vf0MeRrocf170hFaGp6PeaTM0dzGNoYpvQ5Ukds+tZ9bJpq6IfmdBIlFndS2F3HcRMVZGBBHbHerkkNVnh9q9+vQjVg4TV0zzKNdxakt0ek2Hjl71UP2sQTBcMN2Afp/hWT4g8a3EVo1pa3Ku8j5LxjBA9j2rhjGVOQSD6imFCTk8n3r5ahwvRo1+fmbiteU9qecSnT5eWz7ko1C6WR3juJYy6lWw55B6g+1a+g+L77QphuVbu3/AOeUrHg+qnqP5VglaYwr2quHpuPK1oeeq873vqen2fxGstcvodNv9Lht7aQmMyyvvJBxgHjA5GT24HpmjU/DseqebazTNLE26RDtI2SAA4VznCnkYOQDXlTZq5ba9q1hAIbXULiKEEnyw525Pt07V5NTAqDvRdjsjiOb49Tr18GTS+H9SmsbS8hQwqVsrgh3aQH7ykYxjnt0J9cV55c2s9pM0NxC8Mq8lHXBFdH/AMJ/4oEDRDVG2sCCfKTcRjHXGaqyeJjeDGq6ba3jCPYHIMbg5znKn8MDFZ0o4iDfPZry3/EubpNLlujaeL2qB4fatJ1FQOor7icEfJwqMzWhqFoq0WUVCyiuaUDpjUZntHUDJWg6ioHUVyzgbxmZ7pULLV51FV3ArknA6oSKbLiozVhxULVySR0RZ//Z" id="svg_9" height="60" width="80" y="158" x="36"/></g> please check link
When you use SVG as an image format i.e. in an HTML <img> tag (as you are doing) or as a background-image the SVG file must be complete in the one file in order to protect user's privacy. Your SVG image refers to an external jpg file and that's not allowed. You can make this work though. Take the jpg image data and encode that in base64 and embed that in your SVG file. Encode the entire new SVG file complete with the encoded internal image data as base64 and then plug that in as your <img> If you work with javascript, you can follow this solution : JS: how to load a bitmap image and get its base64 code?
Instead of using img tag, if we use object tag then image is displayed properly in all browsers. <object type="image/svg+xml" data="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iN2luIiBoZWlnaHQ9IjRpbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHJlY3Qgc3R5bGU9InBvaW50ZXItZXZlbnRzOm5vbmUiIGZpbGw9IiNGRkYiIHN0cm9rZT0iIzAwMCIgeT0iMCIgeD0iMCIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSI+PC9yZWN0PgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxyZWN0IGZpbGw9IiNGRjAwMDAiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSI1IiB4PSIxMjIzIiB5PSIxMDIxIiB3aWR0aD0iNDM0IiBoZWlnaHQ9IjIzMCIgaWQ9InN2Z18yIi8+CiAgPHJlY3QgZmlsbD0iI0ZGMDAwMCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjUiIHN0cm9rZS1kYXNoYXJyYXk9Im51bGwiIHN0cm9rZS1saW5lam9pbj0ibnVsbCIgc3Ryb2tlLWxpbmVjYXA9Im51bGwiIHg9IjExOTciIHk9IjEwMTciIHdpZHRoPSI0MTUiIGhlaWdodD0iMjMxIiBpZD0ic3ZnXzQiLz4KICA8cmVjdCBpZD0ic3ZnXzYiIGhlaWdodD0iMTIiIHdpZHRoPSIyNCIgeT0iMTI5MyIgeD0iMTQ2NiIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2U9IiMwMDAwMDAiIGZpbGw9IiNGRjAwMDAiLz4KICA8cmVjdCBmaWxsPSIjRkYwMDAwIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iNSIgeD0iMTg5IiB5PSI0NCIgd2lkdGg9IjE1MyIgaGVpZ2h0PSIxMDciIGlkPSJzdmdfMSIvPgogIDxyZWN0IGZpbGw9IiMwMGZmZmYiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2UtZGFzaGFycmF5PSJudWxsIiBzdHJva2UtbGluZWpvaW49Im51bGwiIHN0cm9rZS1saW5lY2FwPSJudWxsIiB4PSIxNzMiIHk9IjE1NyIgd2lkdGg9IjE5NCIgaGVpZ2h0PSI2MiIgaWQ9InN2Z18zIi8+CiAgPHJlY3QgaWQ9InN2Z181IiBoZWlnaHQ9IjczIiB3aWR0aD0iMzA4IiB5PSIyMjAiIHg9IjExOCIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2U9IiMwMDAwMDAiIGZpbGw9IiNGRjAwMDAiLz4KICA8aW1hZ2UgeD0iMSIgeT0iMSIgd2lkdGg9IjU3MyIgaGVpZ2h0PSIyOTkiIGlkPSJzdmdfNyIgeGxpbms6aHJlZj0iaHR0cDovL3QyLmZ0Y2RuLm5ldC9qcGcvMDAvNTUvOTkvNzUvNDAwX0ZfNTU5OTc1MzZfalRHVGdJMXJZQzhnb2xiSUF1ejNiR01zdDVBaHdUOVYuanBnIi8+CiA8L2c+Cjwvc3ZnPg=="></object> plz check link
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.