Re: Handling SVGs in your XDA
i still see no issue regarding svg as a graphic outside of website
Re: Handling SVGs in your XDA
Quote:
Originally Posted by
handrawn
i still see no issue regarding svg as a graphic outside of website
handrawn, thank you. That is good to know.
Acorn
Re: Handling SVGs in your XDA
you are welcome;
things are a lot better than they were eg import from inkscape now is sized correctly
Re: Handling SVGs in your XDA
Very cool and usefull,
thank you,
Fly
Quote:
Originally Posted by
Acorn
I consider it amazing that Xara has yet to respond to handling SVG files in a vector-driven application.
This is my current workaround:
- Drop an SVG onto the page.
My demo file that I have used is AcornAtavar.svg
The XDA renders this as a Group: a collection of shapes, text, fills and images, depending on the complexity of the SVG.
All well and good until (Website > )Export and the grouped elements are converted to a 96dpi image, typically PNG. And yes, there could also be a Retina version.
The group still requires an Image filename for SEO and just plain manners. - Select the Group and press Shift+Ctrl+Alt+A to get an Attach File dialog and locate and pick the same SVG.
I use the Search Everything program so I can pick up the full path easily and input that directly.
The places the file into the index_htm_files/ folder. - Now enter Placeholder > HTML code (body) and input:
<img src="index_htm_files/
AcornAtavar.svg
" width=100% height=100% />
You should keep Regenerate placeholder unticked, especially if scaling afterwards.
- You now have an SVG instead of a PNG and a named one at that.
My design file:
Attachment 129028
As an extra, I added some simple CSS to provide a rollover for comparison. It scales up the shapes to 500%. In use, you add the special
Name htmlclass="svg" to anything.
The third acorn is "exploded" to show the artefacts in better detail.
Acorn
CSS:
<style>
.svg {
transition: transform 1s ease-in-out;
overflow: hidden;
}
.svg:hover {
transform: scale(5);
cursor: zoom-in;
}
</style>