The image component currently seems unable to handle all file types. A JPG file works without any issues, but a WEBP file is not displayed.
I have noticed this as well, which is a bummer.
There are also some problems with SVG images as well. Sometimes they will allow the fill and stroke to be set and other times it does not work. It would be helpful to have a guide that details just what the requirements are for control of an SVG.
I have the exact opposite problem: webp displays well in Elements, not in Safari. So I only use jpg for the moment.
The Image Component only supports JPG, PNG and GIF right now. It shouldn’t accept other file types (like SVG or WebP).
If you have an SVG, please use the SVG component.
Sorry, WebP is not support right now.
SVG images don’t always respond as expected to CSS styles for a few reasons, and it’s a common stumbling block. Here’s a quick rundown on why this happens and how to get more reliable control over your SVGs in RapidWeaver Elements…
SVG elements have their own styling properties, like fill and stroke, which can sometimes conflict with CSS styles. If these attributes are set within the SVG code itself (e.g., ), they can override CSS. For greater flexibility, try removing these inline attributes and letting CSS handle the styling.
For scalable, theme-compatible SVGs, you can set the fill and stroke attributes to currentColor within the SVG file. This approach allows Elements to set SVG color for the stroke or Fill.
I’ve started writing a Q&A in the Elements Docs to help with SVG’s, take look for a little more info.
2 Likes
I have been testing this approach and in general it seems to work. But when you set the fill to currentColor, it fills with BLACK. Then when you use the SVG in Elements you can change the color of the fill, but if you choose to have NONE (no fill) the SVG will be filled with BLACK. I don’t know if this is because Elements is just ignoring the fill when setting to none or some other reason. It seems when NONE is selected Elements should set the fill styling to NONE. For the stroke color it works fine, when you set it to NONE nothing is drawn. I suspect this is because in my SVG I did not set a stroke color. The only option I can see is to have no styling in the SVG at all, but this makes it a little hard to use as you cannot see anything when using it.
Unfortunately this is the problem with SVGs, they are all built differently (and often incorrectly).
Can you share the SVG so we can take a look and see what’s going on?
Can you set opacity to zero with a color of black? Will that make it transparent for you?
Hopefully, just paste the code for the SVG in here will work.
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg viewBox="0 0 600 324" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g id="GB24-LOGO-v2-FINAL"><g id="Outline"><path id="GB24" d="M561.006,196.447C571.496,196.447 580,204.202 580,213.768L580,283.867C580,293.433 571.496,301.188 561.006,301.187L429.244,301.187C418.754,301.188 410.25,293.433 410.25,283.867L410.25,213.768C410.25,204.202 418.754,196.447 429.244,196.447L561.006,196.447ZM212.098,85.68L212.098,70.835C212.098,69.684 213.031,68.752 214.181,68.752L313.253,68.752C351.46,68.752 378.568,90.311 382.855,123.399L405.748,102.044C420.544,88.047 425.99,81.413 425.99,72.214C425.99,62.125 418.847,55.07 408.01,55.07C401.82,55.07 397.102,57.065 393.96,60.676C390.751,64.364 389.195,69.654 389.195,75.976C389.195,77.126 388.262,78.059 387.111,78.059L353.255,78.059C352.105,78.059 351.172,77.126 351.172,75.976C351.172,58.637 356.857,44.351 366.773,34.381C376.694,24.406 390.879,18.719 408.01,18.719C441.906,18.719 464.431,40.09 464.431,71.378C464.431,92.416 455.127,107.094 433.23,126.844L433.227,126.847L412.611,145.366L451.347,145.366L451.347,120.281C451.347,119.819 451.501,119.37 451.784,119.005L526.602,22.452C526.996,21.943 527.604,21.645 528.248,21.645L560.015,21.645C561.165,21.645 562.098,22.578 562.098,23.728L562.098,114.436L577.988,114.436C579.138,114.436 580.071,115.369 580.071,116.519L580.071,147.45C580.071,148.6 579.138,149.533 577.988,149.533L562.098,149.533L562.098,178.38C562.098,179.531 561.165,180.463 560.015,180.463L526.576,180.463C525.426,180.463 524.493,179.531 524.493,178.38L524.493,149.533L465.685,149.533L465.685,178.38C465.685,179.531 464.752,180.463 463.601,180.463L366.533,180.463C382.883,192.633 392.573,211.797 392.573,233.456C392.573,273.712 362.184,301.044 314.882,301.044L214.181,301.044C213.031,301.044 212.098,300.111 212.098,298.961L212.098,283.702C192.727,297.565 168.372,305.281 140.638,305.281C70.002,305.281 19.929,255.202 19.929,184.898C19.929,114.918 69.686,64.515 139.334,64.515C167.317,64.515 192.263,72.111 212.098,85.68ZM216.265,275.182C242.514,252.976 257.453,217.776 255.959,174.597L216.265,174.597L216.265,275.182ZM359.829,176.297C372.133,165.91 379.282,150.224 379.282,132.755C379.282,132.647 379.281,132.539 379.281,132.431L353.249,156.715L353.249,176.297L359.829,176.297ZM212.098,170.431L212.098,156.021L192.781,156.021C192.007,156.021 191.297,155.592 190.937,154.907C181.209,136.394 164.558,127.017 142.593,127.017C109.579,127.017 86.667,150.638 86.667,185.224C86.667,202.541 92.127,217.042 102.005,227.196C111.871,237.337 126.119,243.105 143.571,243.105C163.95,243.105 179.912,235.375 188.743,219.245L130.535,219.245C129.385,219.245 128.452,218.312 128.452,217.161L128.452,172.514C128.452,171.363 129.385,170.431 130.535,170.431L212.098,170.431ZM216.265,151.855L252.419,151.855C246.751,128.045 234.05,108.248 216.265,93.956L216.265,151.855ZM274.6,244.408L309.668,244.408C315.373,244.408 319.93,242.641 323.039,239.423C326.16,236.191 327.79,231.543 327.79,225.961C327.79,220.231 326.169,215.58 323.047,212.385C319.937,209.202 315.376,207.513 309.668,207.513C309.668,207.513 274.6,207.513 274.6,207.513L274.6,244.408ZM303.476,123.106C303.476,123.106 274.6,123.106 274.6,123.106C274.6,123.106 274.6,155.439 274.6,155.439L303.476,155.439C309.216,155.439 313.731,154.052 316.785,151.292C319.765,148.6 321.272,144.624 321.272,139.599C321.272,134.395 319.755,130.248 316.755,127.429C313.709,124.566 309.203,123.106 303.476,123.106ZM525.748,101.839L526.428,74.293L494.478,115.272C494.478,115.272 525.747,115.272 525.747,115.272L525.747,101.89C525.747,101.873 525.747,101.856 525.748,101.839Z" style="fill:currentColor"/></g></g></svg>
To get the fill to work I had to completely remove the style settings at the end of the code. Then I can set the color fo the fill, but if I set fill=NONE it goes to BLACK.
Do you mean in the SVG or in Elements?
Unfortunately, Elements does not allow you to set the opacity for the fill color on an SVG, that I can see. That would have made it easy to fix.
1 Like
I’m by no means an SVG Master, but… I’ve managed to get it working after a little trial and error 
Remove the following line from style="fill:currentColor" from the code and it should work!
And here’s the full code, so you can just copy and paste it;
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg viewBox="0 0 600 324" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g id="GB24-LOGO-v2-FINAL">
<g id="Outline">
<path id="GB24" d="M561.006,196.447C571.496,196.447 580,204.202 580,213.768L580,283.867C580,293.433 571.496,301.188 561.006,301.187L429.244,301.187C418.754,301.188 410.25,293.433 410.25,283.867L410.25,213.768C410.25,204.202 418.754,196.447 429.244,196.447L561.006,196.447ZM212.098,85.68L212.098,70.835C212.098,69.684 213.031,68.752 214.181,68.752L313.253,68.752C351.46,68.752 378.568,90.311 382.855,123.399L405.748,102.044C420.544,88.047 425.99,81.413 425.99,72.214C425.99,62.125 418.847,55.07 408.01,55.07C401.82,55.07 397.102,57.065 393.96,60.676C390.751,64.364 389.195,69.654 389.195,75.976C389.195,77.126 388.262,78.059 387.111,78.059L353.255,78.059C352.105,78.059 351.172,77.126 351.172,75.976C351.172,58.637 356.857,44.351 366.773,34.381C376.694,24.406 390.879,18.719 408.01,18.719C441.906,18.719 464.431,40.09 464.431,71.378C464.431,92.416 455.127,107.094 433.23,126.844L433.227,126.847L412.611,145.366L451.347,145.366L451.347,120.281C451.347,119.819 451.501,119.37 451.784,119.005L526.602,22.452C526.996,21.943 527.604,21.645 528.248,21.645L560.015,21.645C561.165,21.645 562.098,22.578 562.098,23.728L562.098,114.436L577.988,114.436C579.138,114.436 580.071,115.369 580.071,116.519L580.071,147.45C580.071,148.6 579.138,149.533 577.988,149.533L562.098,149.533L562.098,178.38C562.098,179.531 561.165,180.463 560.015,180.463L526.576,180.463C525.426,180.463 524.493,179.531 524.493,178.38L524.493,149.533L465.685,149.533L465.685,178.38C465.685,179.531 464.752,180.463 463.601,180.463L366.533,180.463C382.883,192.633 392.573,211.797 392.573,233.456C392.573,273.712 362.184,301.044 314.882,301.044L214.181,301.044C213.031,301.044 212.098,300.111 212.098,298.961L212.098,283.702C192.727,297.565 168.372,305.281 140.638,305.281C70.002,305.281 19.929,255.202 19.929,184.898C19.929,114.918 69.686,64.515 139.334,64.515C167.317,64.515 192.263,72.111 212.098,85.68ZM216.265,275.182C242.514,252.976 257.453,217.776 255.959,174.597L216.265,174.597L216.265,275.182ZM359.829,176.297C372.133,165.91 379.282,150.224 379.282,132.755C379.282,132.647 379.281,132.539 379.281,132.431L353.249,156.715L353.249,176.297L359.829,176.297ZM212.098,170.431L212.098,156.021L192.781,156.021C192.007,156.021 191.297,155.592 190.937,154.907C181.209,136.394 164.558,127.017 142.593,127.017C109.579,127.017 86.667,150.638 86.667,185.224C86.667,202.541 92.127,217.042 102.005,227.196C111.871,237.337 126.119,243.105 143.571,243.105C163.95,243.105 179.912,235.375 188.743,219.245L130.535,219.245C129.385,219.245 128.452,218.312 128.452,217.161L128.452,172.514C128.452,171.363 129.385,170.431 130.535,170.431L212.098,170.431ZM216.265,151.855L252.419,151.855C246.751,128.045 234.05,108.248 216.265,93.956L216.265,151.855ZM274.6,244.408L309.668,244.408C315.373,244.408 319.93,242.641 323.039,239.423C326.16,236.191 327.79,231.543 327.79,225.961C327.79,220.231 326.169,215.58 323.047,212.385C319.937,209.202 315.376,207.513 309.668,207.513C309.668,207.513 274.6,207.513 274.6,207.513L274.6,244.408ZM303.476,123.106C303.476,123.106 274.6,123.106 274.6,123.106C274.6,123.106 274.6,155.439 274.6,155.439L303.476,155.439C309.216,155.439 313.731,154.052 316.785,151.292C319.765,148.6 321.272,144.624 321.272,139.599C321.272,134.395 319.755,130.248 316.755,127.429C313.709,124.566 309.203,123.106 303.476,123.106ZM525.748,101.839L526.428,74.293L494.478,115.272C494.478,115.272 525.747,115.272 525.747,115.272L525.747,101.89C525.747,101.873 525.747,101.856 525.748,101.839Z"/></g></g></svg>
And finally… here’s a quick video to show it working 
Oh, yes, we’ll look into opacity support - stay tuned!
1 Like
Aloha Dan,
Yes, that is exactly what I tried here, but the problem is that when you delete the style code you can never NOT have a fill. If you set the fill to NONE you will still get a black fill. This is where the OPACITY would come in handy as you could potentially override the black color. But it still seems the problem has something to do with the styling.
In my case I just want to have the stroke visible, but the only way I have been able to achieve that is if I set the fill=none;.
Very frustrating trying to figure out how to make SVG images that just work.
Great to see all the other features working on the SVG though.