Illustrator Export not working right with my SVG file

[happy_Eclipse0D4D]

Hello Everyone,

For some reason, my svg file is not exporting correctly when I am using illustrator. I have attached a PNG of what it is supposed to look like, a JPEG of my export settings, and my messed up SVG file. Any help will be greatly appreciated as I have been stuck on this for quite some time. This top image is what the svg looks like exported, the middle image is what it is supposed to look like and then the bottom is the export settings.

 

Best,

Noah

[Mylenium]

The long and short of it likely is that your many gradinets and the wavy line expand the pixel data and cannot be expressed in a way that they retain the correct order and cropping inside the SVG. Exporting this as SVG doesn't really make a lot of sense in the first place because of that. It will simply end up being a ton of PNG data in an SVG wrapper with most vector data and editability lost. Anyway, the long answer is that you may need to spend a ton of time re-ordering your layers and objects, expanding appearances and likely forego stuff like drop shadows that would later be expressed parametrically as SVG filters or CSS properties. Again, your stuff doesn't lend itself for an SVG and will need a lot of attention to even get some editability.

Mylenium

[happy_Eclipse0D4D]

Okay. Thanks for the speedy reply. I was trying to use it for a user interface to an audio plugin. Would you reccomend just exporting as a png and then sizing it down?

I want to be able to export it as a high quality png but have the size stay the same. What would be the best method of doing this.

To be honest I only went with SVG just because it rendered clearer than PNG. I am very much a novice regarding graphic design.

Best,

Noah

[Mylenium]

If this is used for actual development you have to look up how your UI library integrates your images in the code. The individual elements most definitely need to be exported separately, anyway. Your large image is only of use as a layout template, if at all, and therefore I can't see how file size even should matter. Even if it were an uncompressed TIFF, the development environment would convert it to a different format if needed or just embed the data, compress and optimize it. Also the rendering of the actual UI components is up to whatever UI kit is used and they have rules for image sizes and resolutions. That also extends to the effective DPI used in the UI and how crisp/ clear it renders. It might be helpful to actually read up on those/ contact the developer. Same if this is a skin for some existing plug-in. Again - just firing out any type of image from AI probably is not really useful if you don't adhere to the specs.

Mylenium