Interactive Design Working with SVGs

Transcription

1 Interactive Design Working with SVGs What are SVGs SVG stands for Scalable Vector Graphic, it is a fi le format available from many vector programs such as Adobe Illustrator. The above artwork was created for a poster I did in Illustrator. In Illustrator you can go to File > Save As and then choose SVG from the drop down menu at the bottom of the dialog box.

2 After this you will get a SVG Options box (much like how you get PDF Options when saving a PDF in Illustrator). The setting above should be the default. Just make sure it doesn t OUTLINE the type. Off to your Text Editor So lets switch gears and head over to our text editor (Dreamweaver, Coda, Text Wrangler, Atom...) I have set up a very basic HTML fi le here with a title, link to a CSS fi le, and a container div in the body. The starting CSS fi le has a couple lines for the container to help size and center the SVG that we will import.

3 Here comes the scary part Now open the SVG fi le that you exported in your text editor. As you can see an SVG is code that builds the forms for us in the browser. Copy all the code from the beginning to end <svg> tag (include the tag of course)

4 Back to the HTML file Paste the copied <svg> into the container div in the starter HTML you have. If you preview this fi le in a browser you should see your SVG centered in the browser window.

5 So we need to clean up our code a bit by removing styles and adding them to our CSS fi le and giving the elements in our HTML class tags to make manipulation easier for us. It is a bit of work but it will make life easier in the long run. We will want to do this to ALL the elements that have any styles in them. If you are feeling confi dent you can hit Cmd+F to open up Find and Replace to do this much quicker.

6 So we can now add those rules to our CSS fi le Note if you copied the styles and pasted them into the CSS they won t work at fi rst since in the SVG they are written as: when a CSS fi le needs to be written: fill= #231F20 fill: #231F20; note the changes include changing the = to a : the removal of the and adding the ; to the end of the rule.

7 I m going to clean up the text just a bit to make it more readable for me, chunking them together into how I have them written on the original artwork. I ve also gotten rid of alot of unnecessary <tspan> tags and just kept ones at the beginning and end of a full line and made sure most the chunks are wrapped in a single <text> tag where I can. In fact I just realize that the text tag can have the class= bodytext and the <tspan>s (with the exception of the one with the class= highlighttext ) shouldn t need a class since they would inherit it from the <text> tag.

8 So for the other parts we have here I m going to add an SVG <g> this is a group tag and will help me with the rollovers I want to create. I ll need to do a little investigation to identify which path and polygon are which. I just misspell the tag name for a second and then save and refresh the preview in the browser to see what disappears. Now that I know which parts are which I can add a Class name that makes sense for the letter, the accent, and then group them together with another class name. I also cut and pasted the letter and accent to be above the text associated with it to make things a bit more organized. I use the class in the CSS to put the fi ll back on each, if you look back you ll see that after the <path> or <polygon> tags before their was a fi ll= #color. By having this controlled by the CSS I can create hover effects to create a more interactive experience.

9 #container helps me position the SGV where I want on the page. font sizes, family, and color for the text color change for the highlighttext class styles for the title at the top of my graphic fi ll for the bigger letters fi ll for the accents hides this particular accent on the page by default displays the accent hidden when we hover over the group we created repeated the above 2 styles for each of the accents and their hover effects from here to the bottom Now for the fi nal touch. I need to add a sequence that talks to the accent within each group class I created. For example I add in.letter_acute.acute and then give it a display: none. This hides the accent by default. After that I add the.letter_acute:hover.acute with a display: inherit; this will cause the accent to appear if I hover over the letter group parts that are visible.

10 What the final page looks like What happens when we hover over the breve a