Welcome to TalkGraphics.com
Page 2 of 2 FirstFirst 12
Results 11 to 14 of 14
  1. #11
    Join Date
    Feb 2007
    Location
    UK
    Posts
    18,688

    Default Re: Handling SVGs in your XDA

    i still see no issue regarding svg as a graphic outside of website
    -------------------------------
    what can I say ?

  2. #12
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    13,104

    Default Re: Handling SVGs in your XDA

    Quote Originally Posted by handrawn View Post
    i still see no issue regarding svg as a graphic outside of website
    handrawn, thank you. That is good to know.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  3. #13
    Join Date
    Feb 2007
    Location
    UK
    Posts
    18,688

    Default 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
    -------------------------------
    what can I say ?

  4. #14
    Join Date
    Oct 2000
    Location
    Wiesbaden, Germany
    Posts
    384

    Default Re: Handling SVGs in your XDA

    Very cool and usefull,

    thank you,

    Fly



    Quote Originally Posted by Acorn View Post
    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>

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •