Weird issue with SVG icons not displaying correctly

Options
ashafer
ashafer Member Posts: 2
in Ask a Question

Maybe someone can help with this....I'm having an issue when uploading .svg images as icons within a grid. For instance, I have a flexgrid that is 5 by 2. I upload 10 .svgs as icons into each container in the grid and 6 out of the 10 display correctly. The remaining 4 only show random parts of the icon. I've been troubleshooting to see if there is anything different about how these containers are set up, etc. and no luck. Help!

Answers

  • Aj_Cre8
    Aj_Cre8 Member Posts: 651 MVP
    Options

    Would can help troubleshoot better, if you provide us a link, screenshots etc...

  • dorit.duda
    dorit.duda Member Posts: 5 Support Team
    Options

    It is not recommended to use multiple SVGs on the same page. See the following article: https://support.duda.co/hc/en-us/articles/1500001498961-Image-Size-Guidelines

    Note states:

    "SVGs are image files that contain HTML code, meaning when you add an SVG icon to your site you are also adding lines of code. Multiple complex SVGs can add thousands of lines of code and cause your site to load slowly. If you need to use multiple SVG icons on the same page, we recommend turning some of them into regular images (.png, .jpeg, etc) to avoid loading or functionality issues."


    It can break the editor if you have too many HTML lines - even 5 "small" looking SVGs can add-up to over 20,000 HTML lines.


    Not sure what is the issue you are describing, but try replacing the SVGs with PNG or JPG

Categories