Join Chris Converse for an in-depth discussion in this video Updating the symbol source art, part of Design the Web: Using Symbols in SVG.
- So now that we have multiple instances of our symbol on the stage, let's come back inside of our original symbol artwork, the circle inside of here, and let's make a change to this and then we can watch this propagate through all the individual instances. So, let's come in here and just do something simple. Let's add a style element. So we'll type style="" and in here let's set the color to white. So we do fill:#ffffff; So immediately you can see that every one of the instances on the stage is now showing us a white circle.
So we get some really powerful efficiencies here by defining a symbol, and then using used elements to position those instances across the stage. Let's come in here and do something different. Instead of a circle, let's come in here and delete the entire circle, and let's add a simple polygon. So we'll type polygon, space, and now inside of our polygon element, let's add points so we'll type points="" and then we'll quickly add three points for an equilateral triangle. So we'll do 0,20 12,0 24,20.
And then as soon as that's in place you'll see that all the circles have now been replaced with a black triangle. At this point, I'd like to go back to our exercise files. Let's come over and open our snippets.html file up in our text editor. And let's replace that triangle we just created with a more complex path that's going to give us a star shape. So, let's come in here and copy this path with all of these coordinates. Close our snippets file. Back in our symbol.html, let's come in here, let's select that polygon, and let's replace it by pasting in that path.
So now we can see that star shape has now replaced the triangles in all of those instances. And now with this path in place let's come back and add a style attribute. Let's add that ="" put in fill:#ffffff So at this point we've successfully modified the source artwork inside of the symbol by changing the color and the changing the overall artwork. So, next we'll take a look at how we can modify individual instances of symbols instead of all of them at once.
Watch more installments of Design the Web on Chris's author page.