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...
Printable View
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.Quote:
Originally Posted by letsgofishing
Try using Soft-group instead.
Acorn
Hi Acorn - makes no difference - social media icons are soft grouped - Instagram has no soft group at all.Quote:
Originally Posted by Acorn
Logo also a bitmap - number of soft grouped shapes.
http://www.mikekaplan.art
Something weird going on - look at that first image of the "layered" cell phone...in X DPX its a 539dpi bitmap...
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.Quote:
Originally Posted by letsgofishing
LGF, Boy is right on both counts.Quote:
Originally Posted by Boy
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.
- 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.
- Make a transparent box and group with a Font Awesome symbol to allow a Xara NavBar to be created.
- 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.
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!!
The rectangle is not exported as a bitmap but, I believe, as a text field.Quote:
Originally Posted by letsgofishing
@Xara - seriously? I give up with their logic...Quote:
Originally Posted by Boy
EDIT: Started from scratch - shapes, logo. menu all sharp! :) - go figure...
Glad you got it all sorted LGF!
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: Attachment 130674
Acorn
LGF, good you are back on track.Quote:
Originally Posted by letsgofishing
There is total logic to Xara's approach, just it doesn't ever explain. Boy was not correct in what he said.
You probably had a corrupted file, which has gone if your started from scratch.
If you just deleted back and re-added then you did something to muck it up - it happens.
Use Retina.
Acorn
Following on from Acorns comments, attached is an svg which you can attach to a xar file using a 'replace with graphic file' placeholder. Resizes as crisp as you want.
Egg, fancy joining in a business venture - TG Reclamations?
Acorn :cool:
In passing, drop it into SVGOMG, drop precision and Paste directly into Placeholder Body.Quote:
Originally Posted by Egg Bramhill
Acorn
Acorn and Egg - many thanks! There just had to be something weird going on!
Liked you comment Acorn :) "There is total logic to Xara's approach, just it doesn't ever explain."