SVG App Icon turns black

  • 22 September 2022
  • 11 replies
  • 36 views

Badge +1

Hi there,

I am trying to upload an app icon that is not black filled but has just the outlines. But when I import my svg, it always turns black even if reviewing the file, it isnt.

Is there any way to just delete the outline icon?
How can I solve this problem?

 

Cheers, Leonard :)

Original:

 

What miro does to it:
 

 

What it looks like on the board:
 

 


11 replies

Badge

Hey @Leonard Thillmann

What the uploader does, is convert all colors to dark-blue. So my first assumption is that the SVG contains a white shape and isn't transparent? Can you check that and retry the upload? If this doest fix it, could you upload the SVG here and I will check it out.

 

Cheers,

Mettin

Badge

Hi @Leonard Thillmann,

Thank you for reaching out! 

The black icon on the app toolbar is the outline icon that you uploaded, so the black-filled icon.

The icon with the outline and the characters is the color icon that you uploaded.
This icon is visible on the app toolbar panel (and on the Marketplace, if you publish your app).

  • In the app settings UI are you uploading the same SVG file for both outline and color icons?
  • If possible, could you share the SVG files that you upload, so that we can reproduce the issue on our end?

In the meantime, this article may provide some more context about how app icons are handled:

https://developers.miro.com/docs/add-a-logo-to-your-app

Badge +1

Hi guys, thank you for your quick replies.
I included the SVG file so you can check it out. I dont need a colored one, I just want to have this one.
I checked, but for me everything is transparent except the outlines.
Thanks a lot :)

Badge +1

Wait how can i attach SVGs here? I thought its fine if i do it via the “insert image” function?

Badge

Hey @Leonard Thillmann,

I don’t see an SVG? Am I correct to understand this issue is fixed?

In the Miro UI you must provide both values, but there’s no rule that says you cant upload the outlined version twice ;)

 

Cheers,
Mettin

Badge

Maybe just paste the markup here if the upload doesnt work

Badge

Just tested and seems SVG doesn’t work unfortunately.

Badge +1

The markup is:
<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M126.75 112.745V55C126.75 54.5858 126.414 54.25 126 54.25H60C59.5858 54.25 59.25 54.5858 59.25 55V96.8969C59.25 97.3112 59.5858 97.6469 60 97.6469H110.1C111.027 97.6469 111.91 98.0433 112.527 98.7362L125.44 113.243C125.898 113.758 126.75 113.434 126.75 112.745Z" stroke="black" stroke-width="2.5"/>
<path d="M1.25 84.7448V27C1.25 26.5858 1.58579 26.25 2 26.25H68C68.4142 26.25 68.75 26.5858 68.75 27V68.8969C68.75 69.3112 68.4142 69.6469 68 69.6469H17.9005C16.9729 69.6469 16.0895 70.0433 15.4728 70.7362L2.56023 85.2435C2.10188 85.7584 1.25 85.4342 1.25 84.7448Z" stroke="black" stroke-width="2.5"/>
<path d="M100.227 87H103.182L94.6364 63.7273H91.7273L83.1818 87H86.1364L93.0909 67.4091H93.2727L100.227 87ZM99.1364 77.9091H87.2273V80.4091H99.1364V77.9091Z" fill="black"/>
<path d="M39.64 34.304V36.448H21.432V34.304H39.64ZM40.76 46.496V48.704H20.376V46.496H40.76ZM38.104 51.328V62.56H35.832V53.472H24.888V62.464H22.52V51.328H38.104ZM36.984 59.2V61.312H23.928V59.2H36.984ZM32.952 35.136C33.624 39.072 34.84 44.512 35.8 47.744H33.304C32.504 44.672 31.288 39.392 30.52 35.392L32.952 35.136ZM38.52 40.032V42.144H25.24V40.032H38.52ZM25.784 40.032V40.32C25.912 42.016 26.232 45.184 26.552 47.488L24.28 47.648C23.992 45.408 23.672 42.496 23.512 40.064L25.176 39.904L25.56 40.032H25.784ZM47.896 35.488C46.168 36.992 44.056 39.104 43.032 40.48L41.432 38.784C42.424 37.472 44.632 35.424 46.328 34.016L47.896 35.488ZM49.592 43.168V45.472H43.864V43.168H49.592ZM45.048 61.6C44.6 61.024 43.736 60.384 38.392 56.672C38.616 56.192 38.936 55.264 39.064 54.624L44.728 58.4L45.432 59.392L45.048 61.6ZM45.048 61.6C45.048 60.736 42.872 59.232 42.872 59.232V43.168H45.144V57.12C45.144 58.432 45.816 59.136 46.296 59.456C45.88 59.968 45.272 61.024 45.048 61.6Z" fill="black"/>
</svg>

Badge
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path d="M58 49a2 2 0 0 1 2-2h66a2 2 0 0 1 2 2v57.745c0 1.839-2.272 2.702-3.494 1.329m0 0-12.913-14.507a1.999 1.999 0 0 0-1.493-.67H60a2 2 0 0 1-2-2V49m2.5.5v40.897h49.6c1.284 0 2.507.549 3.361 1.508L125.5 105.43V49.5h-65Zm-58-28v55.931l12.04-13.526a4.5 4.5 0 0 1 3.36-1.508h49.6V21.5h-65ZM0 21a2 2 0 0 1 2-2h66a2 2 0 0 1 2 2v41.897a2 2 0 0 1-2 2H17.9a2 2 0 0 0-1.493.67L3.494 80.075C2.272 81.448 0 80.583 0 78.745V21Zm100.227 60h2.955l-8.546-23.273h-2.909L83.182 81h2.954l6.955-19.59h.182L100.227 81Zm-1.09-9.09h-11.91v2.5h11.91v-2.5ZM39.64 28.303v2.144H21.432v-2.144H39.64Zm1.12 12.192v2.208H20.376v-2.208H40.76Zm-2.656 4.832V56.56h-2.272v-9.088H24.888v8.992H22.52V45.328h15.584Zm-1.12 7.872v2.112H23.928V53.2h13.056Zm-4.032-24.064c.672 3.936 1.888 9.376 2.848 12.608h-2.496c-.8-3.072-2.016-8.352-2.784-12.352l2.432-.256Zm5.568 4.896v2.112H25.24v-2.112h13.28Zm-12.736 0v.288c.128 1.696.448 4.864.768 7.168l-2.272.16c-.288-2.24-.608-5.152-.768-7.584l1.664-.16.384.128h.224Zm22.112-4.544c-1.728 1.504-3.84 3.616-4.864 4.992l-1.6-1.696c.992-1.312 3.2-3.36 4.896-4.768l1.568 1.472Zm1.696 7.68v2.304h-5.728v-2.304h5.728ZM45.048 55.6c-.448-.576-1.312-1.216-6.656-4.928.224-.48.544-1.408.672-2.048l5.664 3.776.704.992-.384 2.208Zm0 0c0-.864-2.176-2.368-2.176-2.368V37.168h2.272V51.12c0 1.312.672 2.016 1.152 2.336-.416.512-1.024 1.568-1.248 2.144Z"/></svg>

Fixed!

Let me know if there's anything else! =)

Badge +1

Cool, thanks a lot!

Badge

For people that find this thread in the future and face the same issue, here’s how I fixed it:

  1. I opened the svg in a vector editor
  2. merged all shapes into 1 (as you can see in my version there’s only 1 `<path/>`
  3. removed all fill/stroke colors (the shape will default to black)
  4. ran the result through SVGOMG

Hope this helps someone!

 

Reply