At 9:15am on 4/28/2018, I attended I Know I should use SVGs, But I Don’t Know How, Presented by Colin Lord of Pressable, at the 2018 Raleigh Wordcamp Convention in the Engineering Building II of North Carolina State University in Raleigh, NC.
I Know I should use SVGs, But I Don’t Know How
Using SVG images are a lot like going to the gym. We all know we *should* be using them when we write our front end code, but we end up putting it off for another project down the road. And when SVGs are used, they are often implemented in a way that doesn’t unlock their full potential.
During this presentation, I hope we’ll discuss the best practices for SVG implementation and how they vary depending on the size and audience of your site. Perhaps we will also go through what an SVG sprite is, how to create one, and why they’re awesome. According to Advanced Web Ranking.com, only 3% of sites on the internet use this technique…but 97% of browsers support it!
After this talk, I hope to be ready to work on SVGs effectively.
Everything we’re talking about will work on wordpress 4 & 5
The slides will be available. The Coke bottle is an SVG, and it means there are notes in the slides
These Image types have been available over the last 10 years.
SVG Compliment the other image types. You won’t stop using the others. there are 3 types we use, but there’s room for a 4th.
SVG files are smaller than jpg, png, gif
The logo for this company is either 0.5kb or 12kb depending on file type. That’s a dramatic savings on file type. Also,they are HDPI ready. They don’t have to be saved as a 2x, 3x, and you are future saving as well.
At a larger size, there is no difference in quality, but this is not true with bitmap graphics. Vector graphics do not increase in file size and no loss in quality. This is opposite with raster graphics.
What’s the browser support like?
Chris Coyier Practical SVG is a fine book. This book is about creation, export, advocation on SVG at the 4th graphic type.
How do we use them correctly and efficiently?
there are ways to use this correctly and incorrectly. Photoshop can export anything as an SVG. Bitmaps (raster) is not a good SVG image. Once exported how can you use them:
You can treat it like any other image, and it will be treated the same way. Its pretty simple to put them into a webpage. The logo has size advantage and will be used well on any
Image is not loaded into the DOM. It just sees the size as a square. SVG at its core is just code, so you can load it into the dom
This gibberish all came out of illustrator. SVG vectors are really just a lot of math. How do we get on this? This is horribly against several brand guidelines. You can use any CSS, color change, states, etc. You can open the SVG in any text editor, and then post this item into the HTML
It is clear why to use that: there is so much to take advantage of.
rather than consider how much it is to deal with those items, this would be ridonkulous. To fix that, we use the SVG Sprite.
These are less important and people have pushed them out of style. It was tedious and not fun. You create and image window and long background image. It slides around as needed.
Here’s a basic example:
children inside the SVG sprite are symbols, and we give a name or ID inside for each. we use the name SVG- at the front so that we are not confused with it as a CSS Class. The viewbox here is the spacing. The title tag may or may not come with titles out of illustrator. The main takeaway is that the title may be something you wish to add yourself.
An SVG sprite is something we’re not displaying, but we’re putting symbols in in the code.
CLient logo, search and star are being used here. top images are at bottom of <header.php> file. Stars are only on the profile pages.
Social media icons can use a single sprite. You only need to link to it a single time.
this is all relegated to a file (erb?) which can be somewhere on the page
There are more ways, but these are 4 easy ones which we can use. There are more which can be used and they don’t always work well, such as SVG Injector
If the client saw it, that’s bad. Also not a good performance trick. Of the 4 examples we’ve discussed, there hasn’t been a time when the materials didn’t work properly.
Use FontAwesome. Load it into your site. Use them in your site. The iconset is fantastic.
Look at the material here. The HTML method (97% of use) has the most red X in them. Before you go down that road, its how many people use it, but its very, very limited.
The takeaway here: There’s a place for a 4th file type here.
Slides at bit.ly/wcraleigh-svg
The Logitech Spotlight (works with bluetooth and also dongle) was used in this presentation, and it was fantastic!
Exporting from illustrator?
Use the web-optimized version so that you keep things clean and clear
Colin Lord is a Senior Front End Developer for Modea in Blacksburg, Virginia. He has spent the last three years working in the healthcare industry for the Vanderbilt University Medical System, the Duke University Health System, and Carilion Clinic. Before that, he spent time in the music industry building sites for artists like Brad Paisley, Garth Brooks, Imagine Dragons, and The Band Perry. Other clients that have crossed his path are Verizon Wireless, ADT Home Security and DirecTV.
On February 18th, Tyler Dockery spoke to the GDA about Adobe Illustrator and gave one-on-one help to students new to Illustrator.
GDA Lecture: Adobe Illustrator How-To
While I would love to tell you that this was a standing-room only lecture, the odd timing with the school day made this a handful of people only. As this was posted as a beginner tutorial, students with illustrator experience did not show, and since we were running a class of illustrator at the time, it made for a small but charged group.
Together, we gauged the room too find that everyone was already familiar with the pen tool from the photoshop classes that we teach. So, with a few subtle nuances of the pen tool to teach at a rapid pace, we began discussing shapes and the pathfinder tools. Students in such a small environment were able to quickly and easily find the pros of using these two tools together.
Moving onto text and creating outlines, we undertook a simple exercise of creating a d in futura and adding a leaf onto it with the pen tool by combing text outlines and shapes with the pathfinder tool. We then filled this with a green-to-brown gradient and used the paste-inside command to add grey rock images below the brown to create an environmental letter.
Although students were already familiar with illustrator as a thing, many stated they were very excited about going home and trying it out on their own projects.
We then talked about live trace (live paint) for a few minutes, and talked about the distinct differences with bitmap and vector imagery. Students left excited and full of ideas.
On November 18th in the Engineering and Technology Building (ETB) at Wake Tech, Tyler Dockery spoke to the GDA about Adobe Illustrator.
GDA Lecture: Adobe Illustrator, a hands-on workshop
The GDA opened their meetings with a quiet thank you to Marsha Mills and Tyler Dockery before holding an impromptu discussion on the best days and times for meetings. Shortly thereafter, the demonstration was begun.
Beginning with the basic tools of shapes, then text, and finally the pen tool, we got quickly acquainted with the basics of illustrator. We had a ten minute hands-on demonstration of the pen tool and the subtle nuances of P and S curves. Then we moved into the use of creating outlines with the text tool and also using the pathfinder element with shapes, outlines, and type on a path.
From there, participants pulled down internet pictures of ballet dancers, kung fu martial artists, and children at play. For each image, participants used the pen tool to outline their images. Each person received personal attention, and later discussions were opened for individual question and answer periods.
At 6pm On December 18th, 1998 I attended the 1998 Winter Commencement Ceremonies presented by The University of North Carolina at Greensboro at the Greensboro Convention Center in Greensboro, NC.
Received my BFA in Design from the University of North Carolina at Greensboro!
Today I received my Bachelor of Fine Arts degree in Design with a specialization in Graphic Design and Mutlimedia. Hooray!
The Bachelor of Fine Arts degree is the highest undergraduate degree that you can receive in the arts, with the Bachelor of Arts as a lesser degree requiring no foreign language or upper-tier courses. In short:
How Fine Arts Degrees Stack Up
Here is the breakdown of visual arts to liberal arts credits that you will encounter in a BFA or BA program:
- Bachelor of Fine Arts: A BFA requires that approximately two thirds of the course work focus on the creation and study of visual arts, and one third of the course work focus on liberal arts (history, literature, psychology, etc.).
- Bachelor of Arts: For a BA, the course work ratios are flipped, with a two thirds focus on liberal arts and one third focus on visual arts.
These ratios hold true across all establishments of higher learning. The type of degree, not the institution, determines the amount of visual arts to liberal arts you will study.
I chose to take the BFA degree track in design because I want to teach graphic design at the collegiate or university level. To do this, I would have to really get into the field and get to know all facets of design. The BFA program at UNC-G ( http://www.uncg.edu will open in another window) has a focus on both the traditional design methodologies such as drawing, sculpture, color theory, painting, etc., coupled with an emphasis on software and multimedia design. This dual-emphasis on the old and the new will really give me a boost in the workplace (hoping).
Software I learned in school
- Adobe Photoshop 3.0
- Adobe Illustrator 2.0
- Adobe Premiere
- Adobe Pagemaker
- Quark XPress
- Aldus Freehand 5.0
- Macromedia Flash 2.0
- Macromedia Director
- Some HTML
Where did you go to school, and what did you learn? Let me know in the comments area!