I’m using Xara Designer Pro, which is great, but unfortunately it doesn’t export the shadows properly (they are just black).
I’m not sure I can justify the ongoing cost of Illustrator though…
Is it that Xara doesn’t export shadows properly or that JUCE’s SVG doesn’t render them correctly? Did you check the same SVGs in Chrome?
Yeah, they don’t work in Chrome either, perhaps they are using an inbedded bitmap?
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!--Generator: Xara Designer (www.xara.com), SVG filter version: 3.0.2.2-->
<svg stroke-width="0.501" stroke-linejoin="bevel" fill-rule="evenodd" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" overflow="visible" width="54pt" height="30pt" viewBox="0 0 54 30">
<defs>
<marker id="DefaultArrow2" markerUnits="strokeWidth" viewBox="0 0 1 1" markerWidth="1" markerHeight="1" overflow="visible" orient="auto">
<!-- REF_ARROW_STRAIGHT (-2) -->
<g transform="scale(0.0092592592)">
<!-- 1/108 -->
<path d="M -9 54 L -9 -54 L 117 0 z"/>
</g>
</marker>
<marker id="DefaultArrow3" markerUnits="strokeWidth" viewBox="0 0 1 1" markerWidth="1" markerHeight="1" overflow="visible" orient="auto">
<!-- REF_ARROW_ANGLED -->
<g transform="scale(0.0092592592)">
<path d="M -27 54 L -9 0 L -27 -54 L 135 0 z"/>
</g>
</marker>
<marker id="DefaultArrow4" markerUnits="strokeWidth" viewBox="0 0 1 1" markerWidth="1" markerHeight="1" overflow="visible" orient="auto">
<!-- REF_ARROW_ROUNDED -->
<g transform="scale(0.0092592592)">
<path d="M -9,0 L -9,-45 C -9,-51.708 2.808,-56.580 9,-54 L 117,-9 C 120.916,-7.369 126.000,-4.242 126,0 C 126,4.242 120.916,7.369 117,9 L 9,54 C 2.808,56.580 -9,51.708 -9,45 z"/>
</g>
</marker>
<marker id="DefaultArrow5" markerUnits="strokeWidth" viewBox="0 0 1 1" markerWidth="1" markerHeight="1" overflow="visible" orient="auto">
<!-- REF_ARROW_SPOT -->
<g transform="scale(0.0092592592)">
<path d="M -54, 0 C -54,29.807 -29.807,54 0,54 C 29.807,54 54,29.807 54,0 C 54,-29.807 29.807,-54 0,-54 C -29.807,-54 -54,-29.807 -54,0 z"/>
</g>
</marker>
<marker id="DefaultArrow6" markerUnits="strokeWidth" viewBox="0 0 1 1" markerWidth="1" markerHeight="1" overflow="visible" orient="auto">
<!-- REF_ARROW_DIAMOND -->
<g transform="scale(0.0092592592)">
<path d="M -63,0 L 0,63 L 63,0 L 0,-63 z"/>
</g>
</marker>
<marker id="DefaultArrow7" markerUnits="strokeWidth" viewBox="0 0 1 1" markerWidth="1" markerHeight="1" overflow="visible" orient="auto">
<!-- REF_ARROW_FEATHER -->
<g transform="scale(0.0092592592)">
<path d="M 18,-54 L 108,-54 L 63,0 L 108,54 L 18, 54 L -36,0 z"/>
</g>
</marker>
<marker id="DefaultArrow8" markerUnits="strokeWidth" viewBox="0 0 1 1" markerWidth="1" markerHeight="1" overflow="visible" orient="auto">
<!-- REF_ARROW_FEATHER2 -->
<g transform="scale(0.0092592592)">
<path d="M -36,0 L 18,-54 L 54,-54 L 18,-18 L 27,-18 L 63,-54 L 99,-54 L 63,-18 L 72,-18 L 108,-54 L 144,-54 L 90,0 L 144,54 L 108,54 L 72,18 L 63,18 L 99,54 L 63,54 L 27,18 L 18,18 L 54,54 L 18,54 z"/>
</g>
</marker>
<marker id="DefaultArrow9" markerUnits="strokeWidth" viewBox="0 0 1 1" markerWidth="1" markerHeight="1" overflow="visible" orient="auto">
<!-- REF_ARROW_HOLLOWDIAMOND -->
<g transform="scale(0.0092592592)">
<path d="M 0,45 L -45,0 L 0, -45 L 45, 0 z M 0, 63 L-63, 0 L 0, -63 L 63, 0 z"/>
</g>
</marker>
<filter id="StainedFilter">
<feBlend mode="multiply" in2="BackgroundImage" in="SourceGraphic" result="blend"/>
<feComposite in="blend" in2="SourceAlpha" operator="in" result="comp"/>
</filter>
<filter id="BleachFilter">
<feBlend mode="screen" in2="BackgroundImage" in="SourceGraphic" result="blend"/>
<feComposite in="blend" in2="SourceAlpha" operator="in" result="comp"/>
</filter>
<filter id="InvertTransparencyBitmapFilter">
<feComponentTransfer>
<feFuncR type="gamma" amplitude="1.055" exponent=".416666666" offset="-0.055"/>
<feFuncG type="gamma" amplitude="1.055" exponent=".416666666" offset="-0.055"/>
<feFuncB type="gamma" amplitude="1.055" exponent=".416666666" offset="-0.055"/>
</feComponentTransfer>
<feComponentTransfer>
<feFuncR type="linear" slope="-1" intercept="1"/>
<feFuncG type="linear" slope="-1" intercept="1"/>
<feFuncB type="linear" slope="-1" intercept="1"/>
<feFuncA type="linear" slope="1" intercept="0"/>
</feComponentTransfer>
<feComponentTransfer>
<feFuncR type="gamma" amplitude="1" exponent="2.4" offset="0"/>
<feFuncG type="gamma" amplitude="1" exponent="2.4" offset="0"/>
<feFuncB type="gamma" amplitude="1" exponent="2.4" offset="0"/>
</feComponentTransfer>
</filter>
<image id="Bitmap" width="0.001" height="0.001" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAAoCAYAAABdGbwdAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACLUlEQVR4nO2Zi26DMAxF3Wn//71tGXSFjcq414/waG2pV7ISFjORM+cmsBMR3SiP+ntcjDg743vn9F/Hzre+vu8xvPshmIZA3HaKkEZAl83T2k/zEruK6FjI6zF+RPQiEGQL+kMZAY0AECQLDO/3tIQ0kA0KwXlAygoIQYpWD4JkVRFviYpUkBYSjIQ0w9DgSFCuN1UAJCvGqx7kQVoVuaCyARofFgHygEUAhaH8a7oeAZ0PmOhacUBdoD0cVNYKklu6tdSiBu0ZNYE2JSANCIKFtvlI5dwIVxBRgQqyTHnN0mo9kS+UGRDfxlt2sR5ce9VUyoM4HHnWuRpjmv945mwus4yAJADuMwjeFpMu6UF8shKABqbVpMuepCUgGdbpGXmQBkpCUd/oMx4UpcnyyXb0DEGC6ajtNYPDeVLGCuIeYu1MyHM8D7LMmqjALjY+nDVZC4o2vsaDHv3MgNCnC2tMg6ZVD/IfogIVJL3D+nyBAuW3fONeqAKgAfxMM+EZkHVP9B8Ak7ICksvCMtxonvYmX2oX44D46VeDIU/I1jhvtbNPiV0MvRYgGFvy5Lcg04MyHRR52aPwDLc1L3SSzlhB0iOsCUZBeONQGQFpkOQk14yhvHIexEv+VW2Z70HWW3akv+Yeuc2nrqBRVul72/MeObOmfkZA3sTkX/vI/NSAeN+7XjuGchfKCshrIzlbf8ekbAfFWU9eAPrRvE33nOgPUmbB0n9jzkcfNegXF+qbcgE22vAAAAAASUVORK5CYII=">
<title>1</title>
</image>
<linearGradient id="LinearGradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="48.213" y2="0" gradientTransform="translate(-0.213 18.038)">
<stop offset="0" stop-color="#cccccc"/>
<stop offset="0.496555924415588" stop-color="#4c4c4c"/>
<stop offset="1" stop-color="#cccccc"/>
</linearGradient>
</defs>
<g id="Document" fill="none" stroke="black" font-family="Times New Roman" font-size="16" transform="scale(1 -1)">
<g id="Spread" transform="translate(0 -30)">
<g id="Layer 1">
<g id="Group" stroke-linejoin="miter" stroke-linecap="round" stroke="none">
<use transform="translate(0.817 29.317) scale(54000 -30000)" xlink:href="#Bitmap" stroke-width="0" fill="none" stroke-miterlimit="79.8403193612775"/>
<path d="M 0.001,30 L 0.001,6.001 L 48,6.001 L 48,30 L 0.001,30 Z" stroke-width="0.5" marker-start="none" marker-end="none" stroke-miterlimit="79.8403193612775" fill="url(#LinearGradient)"/>
</g>
<g id="Group_1" stroke-linejoin="miter" stroke-linecap="round" stroke="none" stroke-width="0.5" stroke-miterlimit="79.8403193612775">
<path d="M 23.249,30.001 L 23.249,6 L 24.75,6 L 24.75,30.001 L 23.249,30.001 Z" fill="#000000" marker-start="none" marker-end="none"/>
<path d="M 28.949,27.915 L 28.949,8.086 L 30.45,8.086 L 30.45,27.915 L 28.949,27.915 Z" fill="#333333" marker-start="none" marker-end="none"/>
<path d="M 34.649,27.915 L 34.649,8.086 L 36.15,8.086 L 36.15,27.915 L 34.649,27.915 Z" fill="#333333" marker-start="none" marker-end="none"/>
<path d="M 40.349,27.915 L 40.349,8.086 L 41.85,8.086 L 41.85,27.915 L 40.349,27.915 Z" fill="#333333" marker-start="none" marker-end="none"/>
<path d="M 17.549,27.915 L 17.549,8.086 L 19.05,8.086 L 19.05,27.915 L 17.549,27.915 Z" fill="#333333" marker-start="none" marker-end="none"/>
<path d="M 11.849,27.915 L 11.849,8.086 L 13.35,8.086 L 13.35,27.915 L 11.849,27.915 Z" fill="#333333" marker-start="none" marker-end="none"/>
<path d="M 6.149,27.915 L 6.149,8.086 L 7.65,8.086 L 7.65,27.915 L 6.149,27.915 Z" fill="#333333" marker-start="none" marker-end="none"/>
</g>
</g>
</g>
</g>
</svg>Look into Affinity Designer if you want an outstanding Illustrator alternative. IMO it actually surpasses Illustrator completely, and is WAY cheaper.
I use that for “artsy” stuff (app icons, creative drawing) combined with Sketch for in-app glyphs and UI mockups and it’s an unbeatable combo (assuming you’re on Mac, Sketch is Mac-only) - but you could just as easily use just one or the other.
A thing to keep in mind is that JUCE’s SVG implementation doesn’t support the entire standard, so I always make sure to test my exports in the Projucer by simply clicking on it to preview (since it uses JUCE’s SVG renderer) as a part of my SVG workflow to make sure what I need to render can actually be rendered correctly before implementing it in my own code.
Shadows are one thing I’m not sure is actually supported by the JUCE renderer, and you might not even want it since JUCE’s drop shadow rendering is pretty slow.
1 Like
Thanks for th tips, Jon. Affinity looks great, from the demos I’ve just looked at briefly. I think the main worry with SVG is that there is NO standard. Shadows make the whole thing pop IMHO, I don’t want to use a Juce shadow system if it’s slow.
Don’t discount the shadow performance entirely until you’ve tried it (assuming it works for SVGs). My evidence is anecdotal based on my own experience and looking at the code, but given its longevity I imagine those who know better than me (i.e. Jules) made it as performant as possible. If you’re doing something small like button glyphs it probably won’t be a big performance drain, especially if you can cleverly cache the SVGs to bitmaps after rendering once (not sure if JUCE does this already).
An alternative is to go the Apple route and use PNGs at various scales, but those are really only practical for things which aren’t scaling a lot (i.e. not a vector graphics editor or something).
Wow, Affiinity Designer works great and exports drop shadows perfectly thanks for the recommendation, I’m def buying it after the trial period. 
That’s great to hear, I had no idea JUCE SVG worked with shadowing of any sort!
It’s a shadow that’s part of the SVG, but it’s made easier by Affinity because it’s part of the FX layer.