SVG

Justin_Easthall · April 18, 2014, 1:32pm

Importing passthrough SVGs - I cant add links to them??

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Justin_Easthall · April 18, 2014, 2:07pm

I think the SVG action sorts this… I think I do want it to fall back to work on IE 8 so add this action and I can now add a link

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Justin_Easthall · April 18, 2014, 2:18pm

Actually no that didn’t work either??? How on earth are you suppose to add links to SVGs???

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · April 18, 2014, 2:22pm

Try applying the HTML5 Block Link Action to the same item. I think that might do it for you.

Walter

On Apr 18, 2014, at 10:18 AM, Justin Easthall wrote:

Actually no that didn’t work either??? How on earth are you suppose to add links to SVGs???

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Justin_Easthall · April 18, 2014, 2:23pm

I tried that - no luck

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Tim_Plumb · April 18, 2014, 3:14pm

Hi Justin,
I can think of two ways to add a link to an SVG;
#1: Open the SVG itself and add a link into the file itself
#2: a. Import the SVG as a graphic item,
b. make sure the item isn’t scaled or cropped
c. add a link to it using the Edit > Hyperlink dialog box
d. add the Upload Stuff Action to the page
e. add the SVG file to the ‘upload to HTML location’ section
f. with the image selected choose Item > Extended and make sure the tab is selected
g. click "add’ and enter name: src, value: (the name of the svg file)
h. click OK and preview the file.
You should now have an inline SVG that is linked to the target location.

I’m sure there is an Action to be made here somewhere.
Regards,
Tim.

On 18 Apr 2014, at 15:23, Justin Easthall wrote:

I tried that - no luck

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Justin_Easthall · April 18, 2014, 3:15pm

Thanks looking into this now

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Justin_Easthall · April 18, 2014, 3:19pm

Adding a link to the files sounds easy? Can I do it in Illustrator CC?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Justin_Easthall · April 19, 2014, 10:49am

Anyone please??? A freeway friendly way??

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · April 19, 2014, 12:22pm

In Illustrator CC, open the Window/SVG Interactivity palette and have a play.

Walter

On Apr 19, 2014, at 6:49 AM, Justin Easthall wrote:

Anyone please??? A freeway friendly way??

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Justin_Easthall · April 19, 2014, 12:24pm

yeah tried that - all I see is options to add JavaScript and to select states on hover etc?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · April 19, 2014, 1:11pm

onclick: window.location.href='http://example.com'

Try that. I don’t think there’s anything more specific you can do.

Walter

On Apr 19, 2014, at 8:24 AM, Justin Easthall wrote:

yeah tried that - all I see is options to add JavaScript and to select states on hover etc?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

ThomasKimmich · April 19, 2014, 1:55pm

Depends on what you call Freeway friendly. Here is what I’d do:

Apply the HTML5 Block Link Action. Set there the url and stuff and add a class = “svglink”

Then open the styles dialogue and create in total two styles:

a.svglink and a.svglink:after (both names directly to add in the TAG field, make sure that name-field is empty)

Select the a.svglink, hit extended and input the following name/value pairs:

Select the a.svglink:after, hit extended and enter the following name/value pairs:

You can add this into your before end head TAG of the page as well:

gist.github.com

https://gist.github.com/Kimmich-DigitalMedia/11084961

Link to .svg

<style>

a.svglink {
  position: relative;
  display: inline-block;
}

a.svglink:after {
  content: ""; 
  position: absolute;

This file has been truncated. show original

What it does is creating a pseudo element. So all other .svg files that need to be linked simply requires the class of “svglink”.

It would be even easier to create a pointer-events: none for the object but this is unfortunately not supported for IE lower 11.

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Justin_Easthall · April 19, 2014, 2:13pm

Thanks Thomas - do I create a normal HTML box and import passthrough SVG first - then apply the above?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

ThomasKimmich · April 19, 2014, 2:33pm

yes - that’s what I did.

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Justin_Easthall · April 19, 2014, 2:53pm

K - added to logo (i put the styles in the header)

http://www.easthalldesign.com/modern7/

No luck

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

ThomasKimmich · April 19, 2014, 3:17pm

uuups - typo on the gist.

Use the modified above (svglink not svg should this style be called).

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Justin_Easthall · April 19, 2014, 3:38pm

Aha! Cheers that works! Thanks you so much.

Now whats with the Anchor links!? I add these with the HTML5 action but the round logos just go the top of the correct page - even the orange links are not working correctly… Hmmm

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

ThomasKimmich · April 19, 2014, 3:55pm

could you wrap all this into your live-example?

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Justin_Easthall · April 19, 2014, 3:58pm

Its there now - click round icons only goes to the top of the page… click the orange links and it goes to the correct place…

seems the HTML block action has trouble with anchor links?

http://www.easthalldesign.com/modern7/

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options