1

I would like to know if any webpages exist where every single character/glyph is an SVG path, rather than using a font.

I look places like here which discusses icon fonts and how they relate to accessibility and some problems they solve. But I'm wondering if you could do completely without a font like OTF/TTF/WOFF and just instead use SVG paths everywhere.

It looks like you would lose the SEO benefit unless you shadowed your SVG path-driven text content with regular font content beneath the scenes, but either way I would like to know mainly from a performance perspective, if it would be technically possible to have a huge long 100 page article and scroll through it quickly at 12-16px font without any flickering or performance issues. That would be an interesting check to see.

Improve this question
5
  • Is there a practical propose, or is it purely curiosity? I haven't heard of a web page like you describe. But my experience is that any sufficiently large SVG or number of images will flicker on scroll in modern browsers.
    – Maximillian Laumeister ♦
    Jan 12, 2019 at 0:43
  • 1
    It's just a curiosity, I don't like the current font environment.
    – Lance
    Jan 12, 2019 at 0:56
  • What do you dislike about fonts? For my own curiosity.
    – Maximillian Laumeister ♦
    Jan 12, 2019 at 0:58
  • 1
    I don't understand why it needs to be encapsulated. It makes it hard to customize/animate the glyphs for one. It's a separate workflow from normal vector graphics, etc.
    – Lance
    Jan 12, 2019 at 1:01
  • 1
    I'm not sure that there is any way to know this without trying it.
    – Stephen Ostermiller ♦
    Jan 12, 2019 at 9:34

1 Answer 1

Reset to default
2

Tried it out. Took about ~5 seconds to render 10,000 icons as inline svgs locally, and scrolling flashes white a little bit. Didn't do any optimization, don't really know what could be done, but doesn't seem like a workable solution.

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.