Handling SVGs in your XDA

I consider it amazing that Xara has yet to respond to handling SVG files in a vector-driven application.

This is my current workaround:

1. 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.
2. 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.
3. 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.
   
4. 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>

why is this in graphics chat - you are talking about website application here are you not ?

I have no issues worth mentioning with SVG in pro+ as a vector graphic

I'll move this to web chat. OK?

Quote:

---

Originally Posted by handrawn

why is this in graphics chat - you are talking about website application here are you not ?
I have no issues worth mentioning with SVG in pro+ as a vector graphic

---

handrawn, rendering SVGs might have issues in non-web design so I felt it worth a wider airing.

With Pro+ and exporting to PDF/X, I see no difference but I have not checked with Animations or pasting into MS Word...

Acorn

Quote:

---

Originally Posted by gwpriester

I'll move this to web chat. OK?

---

Gary, I don't consider that a help but I'm not too bothered.

Acorn

it's just that it is headed 'handling SVGs in your XDA', when in fact

Quote:

---

All well and good until (Website > )Export...

---

betrays the fact that it is a website specfic issue

I don't really care that much, but it was not what I was expecting fron the title in this forum ;)

Quote:

---

rendering SVGs might have issues in non-web design

---

##i don't see these addressed in your post - did I miss it ?

Thank you Acorn, interesting information

Quote:

---

Originally Posted by handrawn

it's just that it is headed 'handling SVGs in your XDA', when in fact betrays the fact that it is a website specfic issue
I don't really care that much, but it was not what I was expecting fron the title in this forum ;)

---

I bracketed the website part on purpose.

It is a similar situation to importing or linking (say, a PDF). There are times and places for both, hence the handling deficiency, as I see it, with SVGs.

Acorn

Quote:

---

Originally Posted by handrawn

##i don't see these addressed in your post - did I miss it ?

---

The "might" was bait for further discussion.

Acorn

i still see no issue regarding svg as a graphic outside of website

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

you are welcome;
things are a lot better than they were eg import from inkscape now is sized correctly

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:

1. 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.
2. 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.
3. 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.
   
4. 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>

---