Transcript:
There’s a lot of content out there on Adobe Illustrator already, maybe not as much as Photoshop because it’s not as widely used by as many people, but it is still a standard in the industry. And so there’s a lot of stuff out there. One of the less frequently seen things on it, though, is hyperlinks, so a lot of people that are using illustrator are using it for, like print design where that’d be t-shirts or billboards or business cards. It’s commonly used in print and design, so hyperlinks don’t really have a place in print design because you know when you print it. Well, obviously, you don’t have that digital aspect to it. Some of the things that we can do with Svg code. We cannot do with illustrator, but we can and do hyperlinks. There is that functionality, So I’ve just created a new document and I’m just gonna drop down a few things just to show you how to do hyperlinks, so you know, we can make a square and give it some color and maybe a rounded rectangle and we can use the paintbrush or the blob brush and we can do some text, all right, so it’s not super obvious on how to make a link. We don’t have it over here. On any of these panels, we can’t just right, click and tell it to make a link, so it’s a little bit more difficult, a little less obvious. We can’t just add it from the appearance panel because it’s not really appearance, right, so what we actually have to do is if to go up to window. We want the attributes window, so if we click on this in here, we actually have a URL right here, so we can click on any of these objects, and we can tell it that we want like the rectangle or the polygon. Whichever is appropriate, we can type in a URL so like googlecom or wherever we want it to go now when we were looking at the SVG code, I showed that you could wrap that hyperlink around multiple objects. If you want multiple objects to go to the same place in this, What does that actually look like in the code? So let’s try it out, so if I instead choose two things, so maybe I add a little bit more paint here. Maybe this time we’ll choose. Oh, that’s that’s fine. Let’s change the color first without having anything selected and paint in there. Maybe make that a little bit larger. All right, now, right now. These are on two different sections of the SVG code. They’re not going to be side by side because of when I created them. If I grab my layer’s panel here, I can open this layer and I can see that they are not side by side, so here’s the yellow. Here’s that teal –is– color and in the middle between them is that Lynx? I’m going to move them next to each other just to see if linking them while they’re side by side shares a hyper link between them in the SVG code. So that I’ve done that I’m gonna grab both and I closed my attribute’s window, so let’s reopen it and instead of multiple URLs, let’s try just one, So I used Google before lets. I guess maybe do Yahoo! I guess so there that is so those should be linked there. We can also group things. So if I group these and then in the group, I give them a URL. What happens with that? So what’s another search engine? I could use Bing, but I don’t want to, so I think Dogpile is still alive, so we can try dog pile. I think that’s calm and then this, this part’s kind of interesting, so this is text and I could link all of the text, but I don’t necessarily want to. I want to see if we can do just part of it. So if I have that selected and I tell it, I guess Polygon, and I guess somewhere a dogpile and another one that’s similar ish to how that one works would be. Yippee so we could do. Yippie calm. I think it’s calm and we can see if that works. I think it did the whole thing. I don’t think I’ll let me do just part of the text. At least not through this method. Anyway, that’s the basic way of doing links and let’s see what happens when we export it or when we saved as an SVG to be more accurate. So on my desktop SVG links and lets. See what we get so here that is and if I open it with text edits, all right, so once again, you know, the way that it does the coding isn’t quite as clear as some of the ones that we’ve done, let’s see. What do we have in here? So here we’ve got a something. This is a rectangle with a black stroke and RGB. This should be that red one. That’s that if we double check the color. Yep, that’s the same, so here’s that, and here’s the way. Did the link pretty standard now the next one? We did a group, right. So what does that look like that should be? Did we do a group? No, we did these. Those should be the next ones, but, actually, if we look at where they are on the layers panel, they are not next up. They’re actually very much towards the top, so it’s actually this group, even though we made the group after those as far as the links go, whatever is in the background is higher up in the SVG markup. Even though on illustrators can be the reverse, whatever is lower down in the layer’s panel will be further in the background but will be higher up and the code is kind of flipped. So this is these two things here, and we grouped them, So here’s the G and the other group should be down here somewhere. This is that weird path. Probably there we go. There’s the end of that group notice. It’s got multiple group tags in here, even though I only created one group, it’s got multiples, Probably from that weird path of that. I drew. That’s wrapped in this anchor tag here going to dogpile, but then it closes that link. And where does it reopen that link? I don’t think it does. I’m not sure if it’s running the one correctly. So if I open this in a browser like Safari or something, it does seem to be working. The link seems to be on both, but I’m not sure why the code looks like that. That’s not the way that I would have written the code and we have all that path stuff there and finally were out of it. So a little interesting that they put the link there, but oh oh! I see they didn’t actually close the link here. You just have a random floating anchor tag for whatever reason. And then they close that random floating anchor tag, but that’s still all within this original anchor tag, so this coding is a little messy for no apparent reason. All right, and then these are these two blob brush things that I made right now these. I did not make a group, right. I just linked them while having both them selected and so here is a path fill and that’s one of the blob brushes and it’s all inside of this anchor tag for Yahoo. And if I scroll down, where is the end of that? There it is, it closes and then it closes that link and then it makes a new link. So the grouping linking the group did actually put them both inside the same anchor tag. Even if it did a weird extra empty one for no reason, whereas without the grouping, it did make two separate links. So does that matter uh-huh it’s up to you. How clean do you want your code to be? And then our last one? Was that text element? So this text element here? I wanted it to just be the link here, but it didn’t do that, even though I highlighted the word link and there it still wrap it around the whole thing and not only that. Remember How chose rect a like it was making me Choose between rectangle or polygon. You have that right here? Here’s that rectangle that it created for what reason why did it bother making the rectangle? One didn’t need to so the way that illustrator does links, Isn’t it necessarily the most efficient So I can delete that notice? It has no fill and it has no, so it’s just a floating rectangle for no apparent reason, so I could grab this, of course and put it actually right around where I wanted it to be and I can save that, and I can refresh this and now we’ve got that link just on here, so you know, no link. It’s just the cursor, and then when I hover over a link all sudden, it changes to the hand because it is now an active link and it works so you can do length in Illustrator, but it might not always behave the way that you’re expecting.