I'm relatively new to using Illustrator so I apologise if this is a silly question. This SVG is exporting very differently from how it should be. After mucking around with the export settings a few times I've had these results:
This is how the SVG is previewed in Illustrator:
I'm not sure if I've done something wrong while creating the SVG or if it is an exporting related issue.
Any guidance would be much appreciated, I've spent hours googling with no luck.
Which application are you using to preview the SVG?
Just the latest version of Illustrator
In which application are the SVGs going to be used?
Illustrator is kind of famous for not being able to import its own SVGs. That has been improved in the latest versions, but it might still fail.
So can you try and open the SVGs in a browser such as Firefox or Chrome and see if they look correct? Or what about Inkscape? Does it show them correctly?
And then of course the application in which you want to use them. This should not be Illustrator. For Illustrator SVG should be a one direction file format: only out, not roundtrip. As long as you still work on a file, save it as an AI file.
Just website graphics. I created these SVGs on Illustrator from scratch. They look fine until I export, I've tried opening them on multiple browsers and they show up the same.
Appreciate your assistance!
The photo is in a clipping mask, right?
There is currently a bug with clipping mask export if I remember that correctly. It has been discussed the recent days. https://community.adobe.com/t5/illustrator-discussions/saving-svgs-with-clip-paths-adds-extra-groups...
I don't know in which way it could affect positioning as well, but maybe dig deeper at that end?
Can we see your settings.
Try Save as SVG Use Artboards enabled and embed.
I have an issue with the export that drops my blends, so try one of the other methods of making a .svg.