Are there any plans to offer optimization options for SVG images. I have spent days trying to figure out just what it takes to get an SVG image to work in Elements and it is daunting.
I have also been exploring some of the option for optimizing SVG images to remove some of the crud that can end up in them. It is amazing how small they can be one optimized.
Unfortunately, I have noticed that with highly optimized and minified SVG images that they do not display correctly in the property inspector. They appear ill formed. They render in the editor and browser just fine.
It would be nice if Elements had some built in support for optimizing and validating SVG images for use in the app. This could start fairly simple but over time could support optimization with tools like SVGO. That can really reduce the code size.
There is a lot I have discovered to get SVG images to work in Elements, but I’m not sure if what I’m doing is the right approach or not. All I have been trying to do is to get them to work as seamlessly as possible.
If needed I can provide more details on my discoveries and some of the things I think Elements could do to help the cause.
Are you creating the SVGs yourself, or are you using an icon pack or similar resource?
Most web-ready SVG icon packs should work seamlessly in Elements. The icon pack authors typically prepare the SVGs to ensure they are optimized for web usage.
If you’re creating your own SVGs, you’ll need to invest some time in research and ensure they are properly formatted to function as expected on the web. This may include ensuring they are easily styled with CSS.
There are numerous online tools available to help clean up SVGs and optimize them for web usage. Have you already tried using some of these tools?
Yes, I am creating SVG images myself as I have my own icon designs.
I have also been testing SVG files from Tabler and in general they tend to work in Elements, but they are still not right. I have to edit them to make them fully editable in Elements.
I do use a SVGO to optimize my files as there is a lot fo crud created by the graphics programs I use. Each one has a slightly different format. I have always hand edited my files in order to get them to work and be as small as possible.
I have found in order to make them editable in Elements I need to remove all formatting options from the file. This then defaults the SVG to a black fill, which then means in Elements if I do not want a fill I have to set the opacity to ZERO.
It certainly is challenging but I think I have a process that allows me to achieve what I need in Elements.
I should add though that there appear to be problems displaying these highly optimized files in the SVG image well in the property inspector. They are commonly badly formed in the well even though they render correctly in the editor and browser.
Today I have been getting lot of crashes when trying to interact with an SVG image well. If I open the property and click “choose” it crashes. I had not seen this before the latest beta, I will keep testing more today. So far it has done this three attempts in a row.