LGF, as simple as I can make it.

A Xara NavBar, which you appear to be using has a button made of one or more text characters, grouped with a shape.
This grouping forces a bitmap. No way round it other than no to use Xara NavBars.

A collection of shapes that are vector cannot be rendered as vectors unless they are referencing an SVG.
Only shapes that can be presented as SPANs with linear-gradients or radial-gradients and with border-radius with some other 2D-transforms (skew, rotation) will appear as vector accurate representations.

Odd vector shapes that are essentially not boxes will show as vector in the design page but will render as bitmaps unless exported as SVG and referenced to.

Non-rotated text will present as vector, even when squashed or stretched.

You have:
  • A graphic Hamburger icon as it is part of a Xara NavBar.
  • A graphic yellow B.
  • Graphics for all social buttons as none are glyphs.
  • A yellow box rendered as a SPAN with background-color: yellow; (actually #FFE000. @Boy, no text field, just a SPAN.
  • It does not matter if a "cell phone pic" has a design dpi of 593; Xara renders at 96dpi to the pixel size of the design image.

You do not have Retina selected so no image will show as 192dpi - useful for SmartPhones.

I have been a one-man band pushing for better HTML Filter rendering over too many years.
The only true way is to link to SVGs, which will render as vector unless you throw in bitmaps and unsupported transparencies (guessing with the last one).

Demo file: Crispy Cremes.xar

Acorn