Bitmap being published instead of vector

[letsgofishing]

A new mobile website and the social media icons (FB, Instagram etc) are exporting as bitmaps when they are individual groups of 2 vector shapes...

[Acorn]

A new mobile website and the social media icons (FB, Instagram etc) are exporting as bitmaps when they are individual groups of 2 vector shapes...

LGF, "groups" force items into being rendered as bitmaps.

Try using Soft-group instead.

Acorn

[letsgofishing]

LGF, "groups" force items into being rendered as bitmaps.

Try using Soft-group instead.

Acorn

Hi Acorn - makes no difference - social media icons are soft grouped - Instagram has no soft group at all.
Logo also a bitmap - number of soft grouped shapes.
http://www.mikekaplan.art

[letsgofishing]

Something weird going on - look at that first image of the "layered" cell phone...in X DPX its a 539dpi bitmap...

[Boy]

A new mobile website and the social media icons (FB, Instagram etc) are exporting as bitmaps when they are individual groups of 2 vector shapes...

Vector shapes are exported as bitmaps unless you first export and re-import them as .svg files. You can also use a font (Font Awesome or else e.g. https://www.dafont.com/theme.php?cat=717) because text (as long as it's not grouped) is not exported as bitmaps.

[Acorn]

Vector shapes are exported as bitmaps unless you first export and re-import them as .svg files. You can also use a font (Font Awesome or else e.g. https://www.dafont.com/theme.php?cat=717) because text (as long as it's not grouped) is not exported as bitmaps.

LGF, Boy is right on both counts.

For the Social Bar, you need to use a font, Font Awesome, or other to render them as glyphs, which scale regardless of the browser zoom.

For the Hamburger icon, you have three approaches.

1. Make three rounded corner boxes, soft-group and place a transparent box over these. Make this the one with the link. Do not use Xara NavBar but link to a pop-up layer if you can handle rollovers on a pop-up.
2. Make a transparent box and group with a Font Awesome symbol to allow a Xara NavBar to be created.
3. Export the Hamburger as an SVG and link to it with Placeholder > Replace with graphic file.

Each has its own design constraints and I cannot advise the best for you.

Acorn

P.S. Boxes > Rounded Corner Boxes > Circles can be rotated and skewed and they still do not render as images.
Work on this as a technique until you have mastered it.

For simple designs you can Export as SVG and link (Approach#3) and retain all vector shapes, provided you only use linear and radial fills.
This is extremely powerful and Xara is slowly nudging this direction. Earlier HTML Filter exports of boxes were images. Rotated text is still images. All vector shapes should be rendered as in-line SVG.

[letsgofishing]

Boy and Acorn - thanks for the replies but I really don't understand - I've done a number or sites using a hamburger menu made up of rectangles and they are completely sharp!.
I've also designed lots of other "shape" graphics and once again I don't get it - they're sharp when published.

I need to repeat what I said though - the Instagram icon is made up of 3 shapes with no grouping/soft grouping but it's blurred.
Also that cell phone pic - it's crazy blurred but it's a 539dpi image in XDPX!

Please check www.mikekaplan.art again - I've added the B "logo" which is a shape plus a rectangle made with the rectangle tool, and then converted it to an editable shape - when published, the "B" is blurred and rectangle sharp!!

[Boy]

Please check www.mikekaplan.art again - I've added the B "logo" which is a shape plus a rectangle made with the rectangle tool, and then converted it to an editable shape - when published, the "B" is blurred and rectangle sharp!!

The rectangle is not exported as a bitmap but, I believe, as a text field.

[letsgofishing]

The rectangle is not exported as a bitmap but, I believe, as a text field.

@Xara - seriously? I give up with their logic...

EDIT: Started from scratch - shapes, logo. menu all sharp! - go figure...

[Acorn]

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