SVG sprite not showing on ios iphone ipad.
In android, and on a PC, everything is ok.
But on iphone, ipad - just a white screen, how to fix it?
<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"
viewBox="0 0 1080 700" style="enable-background:new 0 0 1080 700;" xml:space="preserve">
<g>
<path class="st0 state" data-state="Some text 1" d="M323.3,243.1c8,5,22.6,10,30,12c7.2,1.3,6.9-0.8,14-2c6.6,6.6,18.8,8.9,24,17c2.9,4.3,3.9,7.1,5.6,12.1
c2.9,11.4,12.6,20.4,11.2,32.9c-2.7-0.1-5.4-0.2-8-0.2c-2.6-8.5-5.6-17-7.2-25.8c-3.5,0-9.1-0.1-12.6,0c-2,5-6.4,8.3-8,13
c1,2,4.1,3.9,6,5c1,8.5,8.8,19.2,1.5,26.5c-4.9,5.4-2.2,13.4,1.1,19c5.9,9.3-0.7,18.2-3.6,27.5c-9.9-0.7-18.6-3.6-24-11.8
c-6-0.2-10.9-1.3-17-1.2c1.9-8.2,3.1-12.6,4-21c4.7,4.6,9.6,9.2,17,9c-0.1-4.7,1.5-12-1-17c-3.1-2.7-11.6-9.7-14-10
c0.2-4.3,0.6-11.5,2-19c1.7-8.8,6.5-20.2,7-30c0.3-6.5-3.1-13.2-4-15c-1-0.5-5.7-0.8-9-1c-3.4-0.2-5.5-0.1-7,1c-3.2-4-6-5-12-7
c-1,3-2.8,9.2-2,12c0,2,2.2,3.4,3,6c0.6,1.9,0,3.3,0,5c-13.5-0.3-24.7,0.9-38.1-0.9c-6.4-1.7-10.9-7.1-16.4-10.3
c-3-1.5-4.3-2.7-7.4-3.8c0-3-0.1-4.1,0-7c2.2,0,16.5,6.2,33,4C304.7,260.2,318.4,249.8,323.3,243.1z"/>
</g>
<g>
<path class="st1 state" data-state="Some text 2" d="M560.8,149.4c2.5-2.3,5.8-0.3,8.3,0.8c4.8,2.6,10.2,4.3,14.6,7.5c4.1,3.8,7.9,8.7,13.7,9.9
c9.8,1.4,20.1,0.2,29.5,4c4.4,2.9,7.9,6.9,11.5,10.7c5.3,5.7,6.8,13.6,10.4,20.3c1.7,3.5,6,3.9,9.1,5.4
c7.7,2.7,14.5,7.7,22.3,10.1c7.9,2.6,14.6,7.5,22.3,10.6c14.5,4.7,28.3,11.5,40.5,20.6c5.8,4.2,12.9,6.8,17.7,12.3
c1.8,2.1-0.6,4.6-1.2,6.6l-0.3,0.7c-4,7.6-5,16.7-10.4,23.5c-5,5.5-12.9,6.4-19.6,8.6c-0.9,5.4-1.7,10.9-2.3,16.3l-0.2,0.9
c4.7,1,9.4,1.9,14.1,2.8c-1.8,2.8-3.5,6.1-6.8,7.3c-3.9,1.3-8,1.6-11.8,2.7c-0.4,2.2-1.2,6.5-1.6,8.7c8.6,0.1,17.3,0.3,25.9,0.5
c0.1,4.6,0.2,9.2-0.9,13.7c-5.8,3.5-4.9,11.1-6,16.9c-8.8,0.4-13.9-7.6-21.8-9.6c-3.3,6.2-5,13-5.7,20c-4.9-2.8-9.9-5.1-15-7.3
c-1.3-0.7-2.7-1.1-4.1-0.9c-10.5,0.6-21.1,1-31.6,1.1c0-0.8,0-2.5,0-3.3c3.1-1.8,6.3-3.4,9.5-5.1c-0.9-3.9-0.8-9.2-4.7-11.4
c-5.3-1.1-5.9,6-8,9.5c-5.8-2.1-11.8-3.2-17.9-3.3c-1.2,0-2.4,0-3.5,0c-4.7,0.1-9.8,0.2-14,2.6c-2,3.2-2,7.4-4.5,10.3
c-6.2,0-12.3-0.9-18.5-0.7c-3.2,0.4-5.9,2.5-9.2,2.7c-1.8-0.6-3.3-1.9-5-3l-0.1-1c-0.1-1.5-0.1-3.1-0.1-4.6
c-7,0.1-14.5-1.5-20.9,1.9c-4.1,1.7-7.8,4.3-10.8,7.5c-2.6,0.5-5.2,0.9-7.9,1.2c-2.1-4.5-2.6-9.5-5.2-13.8
c-5.6-6.1-17.8-7.5-18.2-17.5c5.1-6,12.5-10.2,20.3-11.6c-0.7-4.3-2.1-8.8-5.3-11.9c-6.3-3.8-7.1,6.6-13.2,5
c-11.8,0.7-23.6-4.6-32.9-11.5c-0.1-0.5-0.3-1.5-0.3-2c-0.1-0.4-0.3-1.1-0.3-1.5c-6.4-0.6-14.1,2.5-19.3-2.5
c-4.7-3.5-7.5-8.9-12.3-12.4c-1-0.8-2-1.6-3.1-2.3c4.1-1.9,8.6-3.8,11-7.8c3.7-6.2,5.3-13.5,5.5-20.6c0-1.1-0.4-2-1.1-2.9
c-4.3-1.4-9.3-0.3-13.4-2.5c-5-7.2-6.1-16.3-10.9-23.5c-6.8-0.3-13.5,0.7-20.1,1.9c-1.3-7.6,1-17.9-6.4-23.1
c-0.3-0.8-0.7-1.6-1.1-2.4c-3.8-6.3-5.6-13.3-5.5-20.7c4,0.2,8.1,0.6,12.2,0.9c2.4,0.2,4.8,0.5,7.3,0.7c0.4,0,1.2,0.1,1.6,0.2
c2.4-3,5.5-5.4,7.8-8.5c1-2,2.2-6.4,0.7-9.3c-1.5-2.8-3.7-3.8-5-4c-1-2-1-2-1-4c12.6-0.7,24.7-1.5,37.2-2.9c4.6,0,9,1.4,13.6,1.8
c3.4,0.4,6.8,0.7,10.2,1.1l0.9,0.1c2.8,0.7,5.6,1.3,8.4,1.8c1.2-6,2.6-12,3.9-18c1.3,0.1,2.5,0.3,3.8,0.5c1.4,4.2,0.4,9.6,3.5,13
c4.7,2.6,10.3,0.6,15.3,0.3c6.2-0.7,10.3-5.9,15.5-8.8C554,156.6,557.1,152.7,560.8,149.4z M560.5,180.6"/>
</g>
</svg>
Try removing from the SVG header style =" enable-background: new 0 0 1080 700; " xml: space = "preserve"
Modern browsers don't handle this right now.
Specify the fill color explicitly - <path fill="dodgerblue"
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1080 700">
<g>
<path fill="dodgerblue" class="st0 state" data-state="Some text 1" d="M323.3,243.1c8,5,22.6,10,30,12c7.2,1.3,6.9-0.8,14-2c6.6,6.6,18.8,8.9,24,17c2.9,4.3,3.9,7.1,5.6,12.1
c2.9,11.4,12.6,20.4,11.2,32.9c-2.7-0.1-5.4-0.2-8-0.2c-2.6-8.5-5.6-17-7.2-25.8c-3.5,0-9.1-0.1-12.6,0c-2,5-6.4,8.3-8,13
c1,2,4.1,3.9,6,5c1,8.5,8.8,19.2,1.5,26.5c-4.9,5.4-2.2,13.4,1.1,19c5.9,9.3-0.7,18.2-3.6,27.5c-9.9-0.7-18.6-3.6-24-11.8
c-6-0.2-10.9-1.3-17-1.2c1.9-8.2,3.1-12.6,4-21c4.7,4.6,9.6,9.2,17,9c-0.1-4.7,1.5-12-1-17c-3.1-2.7-11.6-9.7-14-10
c0.2-4.3,0.6-11.5,2-19c1.7-8.8,6.5-20.2,7-30c0.3-6.5-3.1-13.2-4-15c-1-0.5-5.7-0.8-9-1c-3.4-0.2-5.5-0.1-7,1c-3.2-4-6-5-12-7
c-1,3-2.8,9.2-2,12c0,2,2.2,3.4,3,6c0.6,1.9,0,3.3,0,5c-13.5-0.3-24.7,0.9-38.1-0.9c-6.4-1.7-10.9-7.1-16.4-10.3
c-3-1.5-4.3-2.7-7.4-3.8c0-3-0.1-4.1,0-7c2.2,0,16.5,6.2,33,4C304.7,260.2,318.4,249.8,323.3,243.1z"/>
</g>
<g>
<path fill="dodgerblue" class="st1 state" data-state="Some text 2" d="M560.8,149.4c2.5-2.3,5.8-0.3,8.3,0.8c4.8,2.6,10.2,4.3,14.6,7.5c4.1,3.8,7.9,8.7,13.7,9.9
c9.8,1.4,20.1,0.2,29.5,4c4.4,2.9,7.9,6.9,11.5,10.7c5.3,5.7,6.8,13.6,10.4,20.3c1.7,3.5,6,3.9,9.1,5.4
c7.7,2.7,14.5,7.7,22.3,10.1c7.9,2.6,14.6,7.5,22.3,10.6c14.5,4.7,28.3,11.5,40.5,20.6c5.8,4.2,12.9,6.8,17.7,12.3
c1.8,2.1-0.6,4.6-1.2,6.6l-0.3,0.7c-4,7.6-5,16.7-10.4,23.5c-5,5.5-12.9,6.4-19.6,8.6c-0.9,5.4-1.7,10.9-2.3,16.3l-0.2,0.9
c4.7,1,9.4,1.9,14.1,2.8c-1.8,2.8-3.5,6.1-6.8,7.3c-3.9,1.3-8,1.6-11.8,2.7c-0.4,2.2-1.2,6.5-1.6,8.7c8.6,0.1,17.3,0.3,25.9,0.5
c0.1,4.6,0.2,9.2-0.9,13.7c-5.8,3.5-4.9,11.1-6,16.9c-8.8,0.4-13.9-7.6-21.8-9.6c-3.3,6.2-5,13-5.7,20c-4.9-2.8-9.9-5.1-15-7.3
c-1.3-0.7-2.7-1.1-4.1-0.9c-10.5,0.6-21.1,1-31.6,1.1c0-0.8,0-2.5,0-3.3c3.1-1.8,6.3-3.4,9.5-5.1c-0.9-3.9-0.8-9.2-4.7-11.4
c-5.3-1.1-5.9,6-8,9.5c-5.8-2.1-11.8-3.2-17.9-3.3c-1.2,0-2.4,0-3.5,0c-4.7,0.1-9.8,0.2-14,2.6c-2,3.2-2,7.4-4.5,10.3
c-6.2,0-12.3-0.9-18.5-0.7c-3.2,0.4-5.9,2.5-9.2,2.7c-1.8-0.6-3.3-1.9-5-3l-0.1-1c-0.1-1.5-0.1-3.1-0.1-4.6
c-7,0.1-14.5-1.5-20.9,1.9c-4.1,1.7-7.8,4.3-10.8,7.5c-2.6,0.5-5.2,0.9-7.9,1.2c-2.1-4.5-2.6-9.5-5.2-13.8
c-5.6-6.1-17.8-7.5-18.2-17.5c5.1-6,12.5-10.2,20.3-11.6c-0.7-4.3-2.1-8.8-5.3-11.9c-6.3-3.8-7.1,6.6-13.2,5
c-11.8,0.7-23.6-4.6-32.9-11.5c-0.1-0.5-0.3-1.5-0.3-2c-0.1-0.4-0.3-1.1-0.3-1.5c-6.4-0.6-14.1,2.5-19.3-2.5
c-4.7-3.5-7.5-8.9-12.3-12.4c-1-0.8-2-1.6-3.1-2.3c4.1-1.9,8.6-3.8,11-7.8c3.7-6.2,5.3-13.5,5.5-20.6c0-1.1-0.4-2-1.1-2.9
c-4.3-1.4-9.3-0.3-13.4-2.5c-5-7.2-6.1-16.3-10.9-23.5c-6.8-0.3-13.5,0.7-20.1,1.9c-1.3-7.6,1-17.9-6.4-23.1
c-0.3-0.8-0.7-1.6-1.1-2.4c-3.8-6.3-5.6-13.3-5.5-20.7c4,0.2,8.1,0.6,12.2,0.9c2.4,0.2,4.8,0.5,7.3,0.7c0.4,0,1.2,0.1,1.6,0.2
c2.4-3,5.5-5.4,7.8-8.5c1-2,2.2-6.4,0.7-9.3c-1.5-2.8-3.7-3.8-5-4c-1-2-1-2-1-4c12.6-0.7,24.7-1.5,37.2-2.9c4.6,0,9,1.4,13.6,1.8
c3.4,0.4,6.8,0.7,10.2,1.1l0.9,0.1c2.8,0.7,5.6,1.3,8.4,1.8c1.2-6,2.6-12,3.9-18c1.3,0.1,2.5,0.3,3.8,0.5c1.4,4.2,0.4,9.6,3.5,13
c4.7,2.6,10.3,0.6,15.3,0.3c6.2-0.7,10.3-5.9,15.5-8.8C554,156.6,557.1,152.7,560.8,149.4z M560.5,180.6"/>
</g>
</svg>
You cannot show .svg images in iOS OS below 13.
From Apple's Xcode 12 release notes:
Asset Catalogs New Features Added support for Scalable Vector Graphic
(SVG) image assets. These preserve their vector representation with
deployment targets of macOS 10.15 or later, iOS 13 or later, and
iPadOS 13 or later. (18389814)
However you can use libraries eg: https://github.com/mchoe/SwiftSVG. But this doesn't not gurantee loading all types of svg images.
Related
Xcode 12 just introduced SVG image support and I've been using them without major problems, however when I tried image slicing the chat bubbles so they stretch correctly depending on the number of characters in the text message, it doesn't seem to work, can't find anything on stackoverflow or apple forum yet so just wondering if anyone knows if it is a known issue or Xcode 12 bug?
This is the chat bubble SVG:
<svg width="206" height="80" viewBox="0 0 206 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="20.4998" y="16" width="161.484" height="40" rx="20" fill="lightseagreen"/>
<path d="M186 56C175.984 56 169.984 55 169.984 46H177.984C177.984 50.0156 176.984 52 186 56Z" fill="lightseagreen"/>
</svg>
How it looks in Xcode assets:
When I click 'Show slicing' here's how it looks:
Compare to the usual 'Show slicing' of PNG images which are working fine:
Thanks
I am adding a layer over my video stream with custom drawn graphics, but when I save the drawn layer for my current frame I have a pretty big file (~10MB). When analyzing the data, it's mostly 0's (representing the actual pixels of the video and not the drawn layer). I understand that PPM and BMP files will inherently be pretty sizable files, but is there a way to handle the repetitiveness of 0's? Is there a different file format I should be checking out?
Here's a "blocky", computer graphics type of overlay with 1182x862 pixels.
Here are the sizes it come out as in the other formats you might like to try:
-rw-r--r--# 1 mark staff 3056668 24 Nov 08:49 overlay.ppm
-rw-r--r--# 1 mark staff 23699 24 Nov 08:49 overlay.gif
-rw-r--r-- 1 mark staff 134723 24 Nov 08:49 overlay.pcx
-rw-r--r--# 1 mark staff 22585 24 Nov 08:48 overlay.png
Be aware that they all have some tradeoffs. Whilst PNG is smallest, it is likely to take longer to write. GIF acquits itself pretty well, but will do poorly if you have too many colours. PCX is a bit archaic, but usable. PPM is large and directly proportional in size to your overlay size.
Note that if your overlays really are very blocky, you could consider reducing them to 1/4 their height and width and make them 16x smaller in volume if you can handle a couple of pixels inaccuracy when scaling back up.
You could also consider generating the overlay in a vector format which should be many, many times smaller in size.
Lifted straight form the documentation from DrawSvg, here is an SVG vector example:
#!/usr/bin/env python3
import drawSvg as draw
d = draw.Drawing(200, 100, origin='center', displayInline=False)
# Draw an irregular polygon
d.append(draw.Lines(-80, -45,
70, -49,
95, 49,
-90, 40,
close=False,
fill='#eeee00',
stroke='black'))
# Draw a rectangle
r = draw.Rectangle(0,0,40,50, fill='#1248ff')
r.appendTitle("Our first rectangle") # Add a tooltip
d.append(r)
# Draw a circle
d.append(draw.Circle(-40, -10, 30,
fill='red', stroke_width=2, stroke='black'))
# Draw an arbitrary path (a triangle in this case)
p = draw.Path(stroke_width=2, stroke='green',
fill='black', fill_opacity=0.5)
p.M(-30,5) # Start path at point (-30, 5)
p.l(60,30) # Draw line to (60, 30)
p.h(-70) # Draw horizontal line to x=-70
p.Z() # Draw line to start
d.append(p)
# Draw multiple circular arcs
d.append(draw.ArcLine(60,-20,20,60,270,
stroke='red', stroke_width=5, fill='red', fill_opacity=0.2))
d.append(draw.Arc(60,-20,20,60,270,cw=False,
stroke='green', stroke_width=3, fill='none'))
d.append(draw.Arc(60,-20,20,270,60,cw=True,
stroke='blue', stroke_width=1, fill='black', fill_opacity=0.3))
# Draw arrows
arrow = draw.Marker(-0.1, -0.5, 0.9, 0.5, scale=4, orient='auto')
arrow.append(draw.Lines(-0.1, -0.5, -0.1, 0.5, 0.9, 0, fill='red', close=True))
p = draw.Path(stroke='red', stroke_width=2, fill='none',
marker_end=arrow) # Add an arrow to the end of a path
p.M(20, -40).L(20, -27).L(0, -20) # Chain multiple path operations
d.append(p)
d.append(draw.Line(30, -20, 0, -10,
stroke='red', stroke_width=2, fill='none',
marker_end=arrow)) # Add an arrow to the end of a line
d.setPixelScale(2) # Set number of pixels per geometry unit
#d.setRenderSize(400,200) # Alternative to setPixelScale
d.saveSvg('example.svg')
d.savePng('example.png')
That comes up as 14,202 bytes of PNG or 1,348 bytes of SVG - so the vector graphics are a massive 10x smaller!
-rw-r--r-- 1 mark staff 1348 24 Nov 10:01 example.svg
-rw-r--r-- 1 mark staff 14202 24 Nov 10:01 example.png
Here is the SVG:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="400" height="200" viewBox="-100.0 -50.0 200 100">
<defs>
<marker markerWidth="4.0" markerHeight="4.0" viewBox="-0.1 -0.5 1.0 1.0" orient="auto" id="d0">
<path d="M-0.1,0.5 L-0.1,-0.5 L0.9,0 Z" fill="red" />
</marker>
</defs>
<path d="M-80,45 L70,49 L95,-49 L-90,-40" fill="#eeee00" stroke="black" />
<rect x="0" y="-50" width="40" height="50" fill="#1248ff">
<title>Our first rectangle</title>
</rect>
<circle cx="-40" cy="10" r="30" fill="red" stroke-width="2" stroke="black" />
<path d="M-30,-5 l60,-30 h-70 Z" stroke-width="2" stroke="green" fill="black" fill-opacity="0.5" />
<circle cx="60" cy="20" r="20" stroke-dasharray="73.30382858376184 52.35987755982988" stroke-dashoffset="-31.41592653589793" stroke="red" stroke-width="5" fill="red" fill-opacity="0.2" />
<path d="M70.0,2.679491924311229 A20,20,0,1,0,59.99999999999999,40.0" stroke="green" stroke-width="3" fill="none" />
<path d="M59.99999999999999,40.0 A20,20,0,1,1,70.0,2.679491924311229" stroke="blue" stroke-width="1" fill="black" fill-opacity="0.3" />
<path d="M20,40 L20,27 L0,20" stroke="red" stroke-width="2" fill="none" marker-end="url(#d0)" />
<path d="M30,20 L0,10" stroke="red" stroke-width="2" fill="none" marker-end="url(#d0)" />
</svg>
If you want to experiment yourself with your actual data, try ImageMagick in the Terminal. You can convert from PPM to PNG like this:
magick input.ppm output.png
or from PPM to quarter-height and quarter-width GIF like this:
magick input.ppm -scale 25% result.gif
Note that ImageMagick will not convert to SVG - as it is a raster graphics program, and rasterises everything before it even starts. It will convert from SVG to raster though.
We are implementing icons in our Ionic / Cordova app that uses SVG icons and whenever exported from Adobe XD, and implemented in the iOS version of the app, the gradient part of the icon shows correctly on Web (Chromium based browsers like Edge / Chrome) and Android but not on iOS.
This is how the icon looks normally in Chrome/Edge/Android and in XD:
And this what the icon looks like once in Cordova - iOS:
As you can see, the dot on the icon that has normally a gradient appears black. We cannot figure out why.
Here is the code of the SVG that Adobe XD produces:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><defs><style>.a{fill:#fff;opacity:0;}.b{fill:none;stroke:#5d5d5d;stroke-linecap:round;stroke-width:1.5px;}.b,.c{stroke-miterlimit:10;}.c{stroke:#fff;fill:url(#a);}</style><linearGradient id="a" y1="0.5" x2="1" y2="0.5" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#d9315d"/><stop offset="1" stop-color="#dc2224"/></linearGradient></defs><g transform="translate(0 0)"><rect class="a" width="24" height="24"/><g transform="translate(-1047.065 -371.769)"><path class="b" d="M1057.747,389.029v-4.016a3.157,3.157,0,0,0-.211-1.137l-.07-.183a2.228,2.228,0,0,0-.4-.662l-.8-.921-.566-.653-4.345-5.017a.224.224,0,0,1,.169-.37h18.052a.223.223,0,0,1,.169.37l-4.923,5.685-.658.76a3.359,3.359,0,0,0-.552.883h0a3.179,3.179,0,0,0-.253,1.243v9.081a.224.224,0,0,1-.355.182l-2.889-2.074" transform="translate(-1.701 -1.801)"/><circle class="c" cx="4.593" cy="4.593" r="4.593" transform="translate(1047.565 372.269)"/></g></g></svg>
Because we thought maybe Adobe XD produces some non compliant code of some sort, we decided to just put it through some SVG sanitizer like this one: http://svg.enshrined.co.uk/ , producing the following code:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<style>.a{fill:#fff;opacity:0;}.b{fill:none;stroke:#5d5d5d;stroke-linecap:round;stroke-width:1.5px;}.b,.c{stroke-miterlimit:10;}.c{stroke:#fff;fill:url(#a);}</style>
<linearGradient id="a" y1="0.5" x2="1" y2="0.5" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#d9315d"></stop>
<stop offset="1" stop-color="#dc2224"></stop>
</linearGradient>
</defs>
<g transform="translate(0 0)">
<rect class="a" width="24" height="24"></rect>
<g transform="translate(-1047.065 -371.769)">
<path class="b" d="M1057.747,389.029v-4.016a3.157,3.157,0,0,0-.211-1.137l-.07-.183a2.228,2.228,0,0,0-.4-.662l-.8-.921-.566-.653-4.345-5.017a.224.224,0,0,1,.169-.37h18.052a.223.223,0,0,1,.169.37l-4.923,5.685-.658.76a3.359,3.359,0,0,0-.552.883h0a3.179,3.179,0,0,0-.253,1.243v9.081a.224.224,0,0,1-.355.182l-2.889-2.074" transform="translate(-1.701 -1.801)"></path>
<circle class="c" cx="4.593" cy="4.593" r="4.593" transform="translate(1047.565 372.269)"></circle>
</g>
</g>
</svg>
Which at first look does some cleaner, but still does not fix our issue.
Most of the icons we use have this gradient in some form or another. And we have other examples of these icons unable to use the gradient in Cordova - iOS version.
So rendering SVG likely has less to do with Cordova, but with specific browser ability to handle SVG.
In your case it seems like you apply "gradient" using url(...) reference within css.
Safari introduced a requirement for the url in this case to feature "absolute" path.
Try the same icon but change the way you refer url from:
fill:url(#a)
to:
fill:url(https://yourwebsite.com/yourpage/#a)
Basically you need something like this for Safari:
fill: url( {{ location.href }}#filterOrGradientId )
It is a pain to work around this issue. So one suggestion could be also to try referring the gradient using fill attribute on the svg circle element.
Example from MDN:
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="myGradient" gradientTransform="rotate(90)">
<stop offset="5%" stop-color="gold" />
<stop offset="95%" stop-color="red" />
</linearGradient>
</defs>
<!-- using my linear gradient -->
<circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>
I've a problem with custom font icons generated from svg using fontello. On PC, icons works fine, but on iOS browsers I haven't transparency. All source svg contains fill-rule: evenodd.
I can't find solution for my problem, if You know how solve this issue, please help.
On PC custom fontello icons works fine, but on iOS I've a problem. I'm not sure if the Android works well, but iOS has a higher priority.
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72">
<defs>
<style>
.cls-1 {
fill-rule: evenodd;
}
</style>
</defs>
<path class="cls-1" d="M0,20V33l2,5,2,4,4,4,3,3,6,3,3,1H33l3-1,6-3,1-2h2v1l1,4L66,72h1l5-5V66L52,46l-2-1-2-1V43l2-3,1-1,1-3,1-3V20l-2-5-2-4L45,7,40,3,38,2,33,0H20L15,2,10,5,7,8,5,10,3,13,1,17Zm16-9-3,3-3,4L9,21,8,27l1,6,2,4,4,4,3,2,2,1,5,1h4l4-1,4-2,4-3,2-4,2-6V25l-1-5-1-2-2-3-3-3-3-2L28,8,21,9l-3,1Z"/>
</svg>
Effect on Desktop (ok): https://ibb.co/9pfZFnf
Effect on iOS (not ok): https://ibb.co/Y846vb0
Apparently it didn't get the css rules. Please try to use the css like this, although I'm not very sure this will work.
<style type="text/css">
<![CDATA[
.cls-1 {
fill-rule: evenodd;
}
]]>
</style>
Alternatively you can reverse the second part of the d attribute (the hole) so that you don't need to use the fill-rule: evenodd;
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72">
<path class="cls-1" d="M0,20V33l2,5,2,4,4,4,3,3,6,3,3,1H33l3-1,6-3,1-2h2v1l1,4L66,72h1l5-5V66L52,46l-2-1-2-1V43l2-3,1-1,1-3,1-3V20l-2-5-2-4L45,7,40,3,38,2,33,0H20L15,2,10,5,7,8,5,10,3,13,1,17Z
M18,10L21,9L28,8L35,10L38,12L41,15L43,18L44,20L45,25L45,29L43,35L41,39L37,42L33,44L29,45L25,45L20,44L18,43L15,41L11,37L9,33L8,27L9,21L10,18L13,14L16,11z"/>
</svg>
I'm using an svg with custom fonts from google, but i'm hosting it myself. Here's the SVG file with the following code:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="430" height="590">
<defs>
<style type="text/css"><![CDATA[
#font-face {
font-family: 'Fjalla';
src: url('http://build-podcast.com/fonts/fjalla.eot');
src: url('http://build-podcast.com/fonts/fjalla.eot?#iefix') format('embedded-opentype'),
url('http://build-podcast.com/fonts/fjalla.woff') format('woff'),
url('http://build-podcast.com/fonts/fjalla.ttf') format('truetype'),
url('http://build-podcast.com/fonts/fjalla.svg#fjalla') format('svg');
font-weight: normal;
font-style: normal;
}
text { font-family: Fjalla, sans-serif; font-weight: bold; fill: #4b5568; }
]]>
</style>
</defs>
<g id="logo">
<text x="135" y="60" font-size="210" transform="rotate(45)">/</text>
<text x="115" y="363" font-size="210" transform="rotate(-45)">\</text>
<text x="15" y="341" font-size="200">build</text>
<text x="15" y="475" font-size="127">podcast</text>
<text x="21" y="540" font-size="36">screencasts on tech tools</text>
</g>
</svg>
I'm using the img tag to display it on the main website
<img src="logo.svg">
It is displaying fine on desktop browsers and even on mobile browsers like Android Chrome. But it is not displaying at all in iOS 7 Chrome or Android. Any clue to how I can amend the SVG file code for the part on the custom fonts? Thanks!
I got fed up with trying to make the fonts to properly work in my SVG across all devices/browsers, so with my work around it helped that I have access to the original .ai file (.eps is fine).
My steps included:
- Open the original vector file in Adobe Illustrator.
- Select your text layers. Hold shift when selecting more than one. I find it easier do select multi layers through the Layers panel, which you can find in Menu under Window.
- Then, go to menu option Type and select Create Outlines.
This way we do not have to rely on calling fonts because your text is now just a vector shape. Now all that is left is to save your SVG:
- Select all your vectors.
- Go to menu option Object and select Artboards > Fit to Selected Art.
- Now go to File and select Export Selection....
- A Export for Screens dialog should pop up. On left side above .your Asset(s), click on the Artboards tab above
- On the right side, choose where you want to save.
- IMPORTANT STEP: select your format as *SVG.
- Lastly, click Export Artboard at bottom right.
That's all there is too it, and everything will appear exactly as it should across all devices and browsers!
We recently had the same problem having custom fonts displaying in SVG images. Before implementing this fix, the text would not show up in iOS on certain devices. After A LOT of debugging and trying different ways to solve it, we ended up with a CSS Font Fallback solution. This was the only way for us to solve the same problem as you describe.
Here is how we implemented it:
First we extracted the shapes of the characters using Adobe Illustrator like this:
<font horiz-adv-x="2048">
<font-face font-family="RobotoCondensed-Light" units-per-em="2048" underline-position="-150" underline-thickness="100"/>
<missing-glyph horiz-adv-x="434"/>
<glyph unicode=" " horiz-adv-x="434"/>
<glyph unicode=""" horiz-adv-x="549" d="M217,1341l-36,-261l-68,0l2,254l0,226l102,0M442,1341l-36,-261l-68,0l2,258l0,222l102,0z"/>
<glyph unicode="," horiz-adv-x="346" d="M246,19l-100,-277l-77,0l56,280l0,168l121,0z"/>
<glyph unicode="-" horiz-adv-x="497" d="M445,568l-399,0l0,104l399,0z"/>
<glyph unicode="." horiz-adv-x="440" d="M276,0l-130,0l0,166l130,0z"/>
<glyph unicode="0" horiz-adv-x="978" d="M867,564C867,376 834,232 767,131C700,30 607,-21 490,-21C372,-21 279,30 212,131C144,232 110,377 110,564l0,326C110,1077 144,1221 211,1324C278,1426 370,1477 488,1477C606,1477 699,1426 766,1324C833,1222 867,1077 867,890M747,911C747,1059 725,1173 681,1252C636,1331 572,1371 488,1371C405,1371 341,1331 297,1252C253,1172 231,1058 231,911l0,-366C231,398 253,285 298,204C343,123 407,83 490,83C573,83 637,123 681,204C725,284 747,398 747,545z"/>
<!-- ...... Complete characterset ...... -->
</font>
Then we defined the font using CSS:
<defs>
<style type="text/css">
<![CDATA[
#font-face {
font-family: 'RobotoCondensed-Light-Fallback';
font-style: normal;
font-weight: 300;
src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRg............7yEuAS1Fmtsgn2C3mGC7pcSzGaItVzpDHKXKRoB2nd8b5m1ni67q0DVvtWpxe61sF59tcm+qiK+1YY21P2oWNdkPaA1Nv0meNl0KL0HwqtAmtRKFDaA9/APTVpT1K/YclSp7tiAGxtzbsEoOZYV9u9g8VM0kokz6M/klEI+HecECMVpoFhuIDsL5bmwAAAVSQKFMAAA==) format('woff');
}
]]>
</style>
</defs>
The magic happened once we named the font "RobotoCondensed-Light-Fallback" and then:
<text style="font-family:RobotoCondensed-Light,RobotoCondensed-Light-Fallback,Arial,sans-serif; font-weight: 300" font-size="36">Text</text>
What happens is that iOS uses <font-face> while all other browsers use the fallback font.
Hope this helps!
For your info, we used this definition in the SVG.
<?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" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="270px" height="303px" viewBox="0 0 270 303" enable-background="new 0 0 270 303" preserveAspectRatio="xMidYMid meet" xml:space="preserve">
FWIW, it's likely that a Tiny PNG-optimised PNG at double-resolution will be waaay smaller than a text-heavy SVG with text converted to curves.
I was getting around 400k for an outlined SVG with about 50 labels of 2 - 6 words, but exported to PNG, ran it through Tiny PNG and got 70k.
So if you just need something for retina screens, consider the PNG route:
https://tinypng.com/
https://www.npmjs.com/package/tinypng-cli