1

I recently asked my graphics designer to create an SVG image for the background of the homepage of my website (to be used via the background-image css property).

I asked her to just write gibberish (eg: Lorem ipsum...) in a particular Google Font on an entire page and then just "cut out" a circle in the middle which will be blank. I asked for this as an SVG file. A general schematic of the layout: background svg general layout

This file size turned out to be quite large (1.7 Mb and 900 Kb after running through SVGO).

Using illustrator, are there any instructions I can give to my graphics designer to have her reduce the file size?

I suspect that the text is being treated as an image and this (because of the many paths/points involved) is causing the file size to rise. Since we're using a Google Font, is there any way we can define it as a text within Illustrator so that Illustrator will do some sort of optimization to the font when converting it to an SVG?

I am not well versed in these matters but, since we're just creating a background image of some script text, I feel like we should be able to reduce the file size. Any suggestions are welcome.

  • I'm curious about how that background image will respond to different viewport sizes. Will the image be stretched (= stretched letters) or will it simply be cropped? Is the cut out circle cutting through letters or does the text wrap around the circle? If the circle just cuts through the letters, this might be easier to achieve with html elements and css? You can make the circle with border-radius and the text could just be plain html. – Wolff Oct 12 '19 at 14:15
  • @BillyKerr Will embeding the Font in the SVG reduce the file size? I don't really need the text to be treated as text in the SVG (Eg: highlighting ect.). I am just interested in reducing the file size. It still just needs to be behave like an image. – theyuv Oct 13 '19 at 8:21
  • @Wolff the circle is not precise. The cutoff is the word, so we wait until there's a space and then cut it off (I just said circle as a general description). The image will be stretched. Don't focus too much on the design, I included it in case it was relevant. The important thing is that I included an image of text and the file size is huge and I'd like to reduce it. I don't care about maintaining the properties of text (highlightable, etc.). – theyuv Oct 13 '19 at 8:24
  • @theyv - You say "It still just needs to be behave like an image". So why not use a raster image and be done with it? Why does it even have to be an SVG? Why does the text need to be part of the image? What's wrong with using a PNG or high quality JPEG (or even an SVG if you insist) containing the graphical elements only, and then adding the text in html? The more complex paths there are in an SVG, the bigger the file size. There's no way to escape this fundamental fact. – Billy Kerr Oct 13 '19 at 10:55