SVG background image not working on iPhone 4? - svg
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>
Related
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?
Flatten clipped areas in SVG to transparency?
I have this SVG file: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve"> <g id="main"> <clipPath id="clip_mask"> <path d="M20.9262,32C18.5189,30.6,16.9,27.9878,16.9,25c0,-4.4735,3.6265,-8.1,8.1,-8.1c2.9878,0,5.6,1.6189,7,4.0262V0L0,0l0,32H20.9262z" fill-rule="evenodd"/> </clipPath> <g id="icon" clip-path="url(#clip_mask)"> <g id="transformed_icon" transform="translate(-1 -1)"> <path d="M26.7,30.5H5.3c-0.4418,0,-0.8,-0.3582,-0.8,-0.8V2.3c0,-0.4418,0.3582,-0.8,0.8,-0.8h21.4c0.4418,0,0.8,0.3582,0.8,0.8v27.4C27.5,30.1418,27.1418,30.5,26.7,30.5z" fill="#FFFFFF" stroke="#6D6E71" stroke-width="1" stroke-miterlimit="1"/> <path d="M8.5,8.5h15M8.5,11.5h15M8.5,14.5h15M8.5,17.5h15M8.5,20.5h15M8.5,23.5h15" fill="none" stroke="#3E79B4" stroke-width="1" stroke-linecap="round" stroke-miterlimit="1"/> </g> </g> <g id="overlay"> <path d="M25,18c-3.866,0,-7,3.134,-7,7c0,3.866,3.134,7,7,7s7,-3.134,7,-7C32,21.134,28.866,18,25,18zM26,29.8c0,0.1105,-0.0895,0.2,-0.2,0.2h-1.6c-0.1105,0,-0.2,-0.0895,-0.2,-0.2v-6.6c0,-0.1105,0.0895,-0.2,0.2,-0.2h1.6c0.1105,0,0.2,0.0895,0.2,0.2V29.8zM26,21.5c0,0.1105,-0.0895,0.2,-0.2,0.2h-1.6c-0.1105,0,-0.2,-0.0895,-0.2,-0.2v-1.3c0,-0.1105,0.0895,-0.2,0.2,-0.2h1.6c0.1105,0,0.2,0.0895,0.2,0.2V21.5z" fill-rule="evenodd" fill="#3E79B4"/> <path d="M26,20.2c0,-0.1105,-0.0895,-0.2,-0.2,-0.2h-1.6c-0.1105,0,-0.2,0.0895,-0.2,0.2v1.3c0,0.1105,0.0895,0.2,0.2,0.2h1.6c0.1105,0,0.2,-0.0895,0.2,-0.2V20.2z" fill="#FFFFFF"/> <path d="M26,23.2c0,-0.1105,-0.0895,-0.2,-0.2,-0.2h-1.6c-0.1105,0,-0.2,0.0895,-0.2,0.2v6.6c0,0.1105,0.0895,0.2,0.2,0.2h1.6c0.1105,0,0.2,-0.0895,0.2,-0.2V23.2z" fill="#FFFFFF"/> </g> </g> </svg> It is an icon with an overlay in the bottom-right corner. There is a clip-gap between the main icon area and the overlay area. This clip-gap is displayed correctly in Affinity Designer 1.5.3.69: But unfortunately, many other programs don't recognize the clip-gap, so they don't display it. For example, here is a screenshot from LibreOffice Draw: So, is it possible to "flatten" the clipped area in the SVG to the same background transparency as the icon background? This would make the SVG clip-gap visible and transparent in such incompatible programs and would allow programs which don't support clipped areas in SVG to render the clipped area as transparency.
I've found a practical but cumbersome and time-consuming solution: Since the SVG is displayed correctly in Affinity Designer, I print the SVG in Affinity Designer to a PDF printer driver. Then I reimport the PDF in Affinity Designer and export it as SVG. Then I can import the SVG in a renderer which doesn't support clipping and it is rendered perfectly. It works.
Yes it is possible to re-use a clip shape to make the clipped area transparent using a filter. However, I very much doubt that a renderer that can't handle clipping properly will be able to handle a filter. But here's how you would do that: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve"> <defs> <clipPath id="clip_mask"> <path id="original-clip-shape" d="M20.9262,32C18.5189,30.6,16.9,27.9878,16.9,25c0,-4.4735,3.6265,-8.1,8.1,-8.1c2.9878,0,5.6,1.6189,7,4.0262V0L0,0l0,32H20.9262z" fill-rule="evenodd"/> </clipPath> <filter id="transparentize"> <feImage xlink:href="#original-clip-shape" x="0" y="0"/> <feComposite operator="in" in="SourceGraphic"/> </filter> </defs> <g id="main"> <g id="icon" clip-path="url(#clip_mask)"> <g id="filter-layer" filter="url(#transparentize)"> <g id="transformed_icon" transform="translate(-1 -1)"> <path d="M26.7,30.5H5.3c-0.4418,0,-0.8,-0.3582,-0.8,-0.8V2.3c0,-0.4418,0.3582,-0.8,0.8,-0.8h21.4c0.4418,0,0.8,0.3582,0.8,0.8v27.4C27.5,30.1418,27.1418,30.5,26.7,30.5z" fill="#FFFFFF" stroke="#6D6E71" stroke-width="1" stroke-miterlimit="1"/> <path d="M8.5,8.5h15M8.5,11.5h15M8.5,14.5h15M8.5,17.5h15M8.5,20.5h15M8.5,23.5h15" fill="none" stroke="#3E79B4" stroke-width="1" stroke-linecap="round" stroke-miterlimit="1"/> </g> </g> </g> <g id="overlay"> <path d="M25,18c-3.866,0,-7,3.134,-7,7c0,3.866,3.134,7,7,7s7,-3.134,7,-7C32,21.134,28.866,18,25,18zM26,29.8c0,0.1105,-0.0895,0.2,-0.2,0.2h-1.6c-0.1105,0,-0.2,-0.0895,-0.2,-0.2v-6.6c0,-0.1105,0.0895,-0.2,0.2,-0.2h1.6c0.1105,0,0.2,0.0895,0.2,0.2V29.8zM26,21.5c0,0.1105,-0.0895,0.2,-0.2,0.2h-1.6c-0.1105,0,-0.2,-0.0895,-0.2,-0.2v-1.3c0,-0.1105,0.0895,-0.2,0.2,-0.2h1.6c0.1105,0,0.2,0.0895,0.2,0.2V21.5z" fill-rule="evenodd" fill="#3E79B4"/> <path d="M26,20.2c0,-0.1105,-0.0895,-0.2,-0.2,-0.2h-1.6c-0.1105,0,-0.2,0.0895,-0.2,0.2v1.3c0,0.1105,0.0895,0.2,0.2,0.2h1.6c0.1105,0,0.2,-0.0895,0.2,-0.2V20.2z" fill="#FFFFFF"/> <path d="M26,23.2c0,-0.1105,-0.0895,-0.2,-0.2,-0.2h-1.6c-0.1105,0,-0.2,0.0895,-0.2,0.2v6.6c0,0.1105,0.0895,0.2,0.2,0.2h1.6c0.1105,0,0.2,-0.0895,0.2,-0.2V23.2z" fill="#FFFFFF"/> </g> </g> </svg> As far as workarounds go, it's hard to debug renderer specific problems without the renderer. But here are some thoughts: It might support clipping but just not support using the stroke as a clip. You could work around this by using a solid circle as the clip-shape. it might support masking not clipping. In this case, define a mask that's the inverse of the clip and apply that. it might not support clipping or masking at all. In that case, you'll have to just draw the original content as if it was being clipped using markers to shape the ends of your paths. (ugh!)
Improve SVG so pin is centered inside circle, without multiple viewboxes
I have a pin that needs to be shown inside a circle in Svg. My current code is the following: <svg viewBox="0 0 20 20" preserveAspectRatio="xMinYMin meet"> <circle cx="50%" cy="1.5" r="1.5" style="fill: green;"></circle> <svg x="47.5%" y="5%" viewBox="0 0 10000 10000" fill="#fff" preserveAspectRatio="none"> <g> <path d="M250,124.3c-35,0-63.4,28.8-63.4,64.1c0,35.3,28.5,64,63.4,64s63.4-28.8,63.4-64.1C313.4,153,285,124.3,250,124.3z M250,222c-18.3,0-33.2-15.1-33.2-33.7s14.9-33.7,33.2-33.7s33.2,15.1,33.2,33.7S268.3,222,250,222z"> </path> <path d="M250,50.9c-74.9,0-135.8,61.6-135.8,137.4c0,31.3,22.5,84.4,66.9,157.7c32.9,54.4,66.2,100.3,66.6,100.7l2.4,3.3l2.4-3.3 c0.3-0.5,33.7-46.3,66.6-100.7c44.4-73.3,66.9-126.4,66.9-157.7C385.8,112.5,324.9,50.9,250,50.9z M250,397.6 c-16.5-24.3-45.5-68.4-69.9-114c-23.5-44-35.9-77-35.9-95.4c0-59,47.4-107,105.8-107s105.8,48,105.8,107 c0,18.4-12.4,51.4-35.9,95.4C295.4,329.3,266.5,373.4,250,397.6z"> </path> </g> </svg> </svg> which works somewhat but seems inelegant, and perhaps also buggy. What I would like is a better way to center the group 'inside' the circle without using JavaScript It would be nice if I could get rid of the extra SVG element in the middle with its really big viewBox that I'm using to place the pin. So if you can show me how to do it with just a g and make a scaling function that would be good.
If you want to use coordinates that contain percentage values, you need an element that has x and y attributes. <use> is such an element, <g> is not. Your live will be easier if you draw your pin centered on the origin of the coordinate system: translate(-250 -230). After that, you can easily scale it to the size you need: scale(0.0025) (remember: multiple transform commands are processed right-to-left.) Finally, you use the pin template with the same x and y coordinates as your circle. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20" preserveAspectRatio="xMinYMin meet"> <defs> <!--center the pin around the origin and scale it to final size--> <g id="pin" transform="scale(0.0025) translate(-250 -230)"> <path d="M250,124.3c-35,0-63.4,28.8-63.4,64.1c0,35.3,28.5,64,63.4,64s63.4-28.8,63.4-64.1C313.4,153,285,124.3,250,124.3z M250,222c-18.3,0-33.2-15.1-33.2-33.7s14.9-33.7,33.2-33.7s33.2,15.1,33.2,33.7S268.3,222,250,222z" /> <path d="M250,50.9c-74.9,0-135.8,61.6-135.8,137.4c0,31.3,22.5,84.4,66.9,157.7c32.9,54.4,66.2,100.3,66.6,100.7l2.4,3.3l2.4-3.3 c0.3-0.5,33.7-46.3,66.6-100.7c44.4-73.3,66.9-126.4,66.9-157.7C385.8,112.5,324.9,50.9,250,50.9z M250,397.6 c-16.5-24.3-45.5-68.4-69.9-114c-23.5-44-35.9-77-35.9-95.4c0-59,47.4-107,105.8-107s105.8,48,105.8,107 c0,18.4-12.4,51.4-35.9,95.4C295.4,329.3,266.5,373.4,250,397.6z" /> </g> </defs> <!--use the same coordinates for the center of the circle and the pin--> <circle cx="50%" cy="1.5" r="1.5" fill="green" /> <use xlink:href="#pin" x="50%" y="1.5" fill="white" /> </svg>
Fill polygon with pattern doesn't work with leaflet
I try to render a SVG polygon filled with pattern. SVG.path filled with pattern doesn't work. As you can see in this jsfiddle, filled background shows up transparent in Firefox and black in Chrome. The example is based on leaflet GeoJSON Example and uses the diagonalHatch pattern described by carto.net. <defs> <pattern id="diagonalHatch" patternUnits="userSpaceOnUse" x="0" y="0" width="105" height="105"> <g style="fill:none; stroke:black; stroke-width:1"> <path d="M0 90 l15,15"/><path d="M0 75 l30,30"/> <path d="M0 60 l45,45"/><path d="M0 45 l60,60"/> <path d="M0 30 l75,75"/><path d="M0 15 l90,90"/> <path d="M0 0 l105,105"/><path d="M15 0 l90,90"/> <path d="M30 0 l75,75"/><path d="M45 0 l60,60"/> <path d="M60 0 l45,45"/><path d="M75 0 l30,30"/> <path d="M90 0 l15,15"/> </g> </pattern> </defs> As this jsfiddle shows, copying the SVG polygons below the map, makes it work on Chrome but not on Firefox. Apply a fill pattern adding this style to SVG.path: style="fill: url(#diagonalHatch)" I'm really not sure if this is a bug in leaflet or some conflict with SVG implementation on Firefox and Chrome.
I've wrote a leaflet plugin for this, you may try it, https://github.com/lnaweisu/leaflet-polygon-fillPattern
Maybe you can try setting the path via the shape's attribute as mentioned in this thread: Leaflet polygon with fuzzy outline
// Set filter attribute on the polygon
polygon._path.setAttribute('filter', 'url(#blur)');
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.