Display Icons Selectively Using Media Queries If you now open your SVG in a browser you’ll see all three logos positioned in the same place, stacked on top of one another. Let’s directly place three use elements on our canvas one for each version: We’ve defined our symbols, but we still need to actually use them.
We have a whole bunch of code now, but if you open the SVG in your browser you won’t see anything. You should end up with something like this–the two versions as symbols: Here you can see the position and dimension values for the text icon: We can get the x, y, width, and height values from Adobe XD (or wherever you designed the icons). The main difference comes now: instead of pasting in the svg path contents directly, we’re going to place use elements referencing our previous symbol parts by their id, like so: These symbols are created just like before, making sure that the viewBox is the correct size in each case. We now need to define more symbols one for each version of the logo we designed previously (the landscape, and the full version). Repeat this process of creating a symbol for the “type” SVG too. Now we paste the contents of our SVG icon within the symbol element, but only the path elements for the flag and the castle. Nested inside our svg we need to define some symbols each of our components will have its own symbol. Here’s what a symbol looks like, including, in this case, a viewBox of 60圆0 (matching the dimensions of our icon). Note: we need to include these peculiar namespace strings so that we can use href attributes etc. We’re going to hand code the beginnings of this SVG, pasting in pieces of our logo assets wherever needed. Once you have your SVG (download the optimized assets here if you like) the following steps describe how you make a responsive logo. Clean up and optimize the SVG using SVGOMG.If you resize the container (hat tip to Rick Strahl for his jQuery Resizable plugin) or the browser window, you’ll see the SVG respond. Here’s what we’re working towards (check out the full screen version for maximum effect):
0 kommentar(er)
