1

Thank you for your answers in advance.

I have the following image in inkscape, which has no layers (the background is usually white).

desired image

When I export to Optimised SVG it appears incomplete (and seemingly randomly).

incomplete image

I have tried changing the groups, from ungrouping everything, to grouping it all in one, but this just results in varying incomplete images. I have tried changing the decimal places from 6 to 5, ticked and unticked the 'collapse groups' and the tick below.

What am I doing wrong to cause the image to export incorrectly as an optimised SVG file. I cannot use PNG or PDF as the web designer has asked for SVG specifically.

Again, thank you in advance, and if you need more details then let me know.

Improve this question
13
  • Hi. Welcome to GDSE. This is difficult to answer without access to the SVG, and will depend on how it was constructed. Some things to try: make sure there are no path effects, and try not to use any filters if at all possible, also try exporting as "Plain SVG" as the file type. These are usually the cause of such problems. Also make sure you are viewing the SVG in a recent/up-to-date browser.
    – Billy Kerr
    May 19, 2020 at 18:08
  • @BillyKerr Thanks! There are no path effects or filters, I am viewing in the most up to date browser and exporting as plain SVG didn't change anything. How do I add the SVG file so that you can see it?
    – sazzy.bazzy
    May 19, 2020 at 18:59
  • @BillyKerr I just tried copying the image that is correct when seen in inkscape and pasting it into Krita (another drawing software), and it resulted in the same incomplete image as if I open the save file in a browser. I am not sure if this is useful information.
    – sazzy.bazzy
    May 19, 2020 at 19:11
  • You can share an SVG image on SVGshare, and post the link.
    – Billy Kerr
    May 20, 2020 at 1:17
  • @BillyKerr Here you go. This is the incomplete version. svgshare.com/i/LH4.svg
    – sazzy.bazzy
    May 20, 2020 at 9:07

1 Answer 1

Reset to default
1

After checking the SVG, the issue seems to be multiple clipping masks throughout the design - especially those background elements and blocks of colour.

There are issues with some Inkscape SVG features not being supported in browsers, and it appears clipping masks are one of those features.

What I suggest you do is release those clipping masks, and instead construct the image using nothing other than paths with strokes, and fills. If you must cut up objects, use boolean operations instead.

Note also that you can use simple filled shapes to hide overlaps without the need for clipping masks.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.