Missouri State University
Web and New Media Blog

Scalable vector graphics: everything old is new again

With the proliferation of articles on scalable vector graphics (SVG) from the web community within recent years, you would think this image format is some bleeding edge web technology. However, SVGs were first developed by the World Wide Web Consortium (W3C) in 1999 and released as an official recommendation in 2001. So how can a web technology that is nearly eighteen years old be the hot topic in today’s web circles? To answer that question, let’s first look at what a SVG actually is.

What’s your vector, Victor?

SVG images are an XML-based vector image format. As opposed to raster, or pixel-based, images such as JPG, GIF and PNG formats, SVG images use coordinates and mathematical calculations to create resolution-independent lines and shapes. Simply put, SVG images are fully scalable without any loss of quality. And since SVGs are human-readable code, they can be edited and versioned as with any other piece of code, readily manipulated by standard web languages such as CSS and Javascript and compressed to extremely small sizes.

One format to rule them all?

So SVG is the One Ring of web graphics, right? Not quite. While SVG images have a litany of benefits, their wheelhouse is relatively flat graphics and shapes. Photographic images and overly complex illustrations will still perform better and more reliably as familiar raster formats such as JPG. However, that opens up a tremendous opportunity for SVGs to shine. The following examples showcase how SVG images outperform comparable raster graphics.

Icon sprites

Icon sprites are a common way to implement and deliver a large volume of user interface icons and graphics with fewer server requests, thus decreasing page load time. This is done by pre-compiling individual graphics into one large graphic “sheet” that can then be repositioned and cropped via CSS to show only the applicable icon. The down side to traditional icon sprites is that they are cumbersome to maintain and implement. With the advent of high-density displays, they can also quickly grow in file size as different resolutions are accommodated.

sprite-2x
Traditional PNG icon sprite
Filesize: 30kb (24-bit transparent PNG)

Similar to their raster counterparts, a SVG sprite combines multiple icons and graphics into one file. Unlike a PNG sprite, though, a SVG sprite has to only have one iteration of each icon or symbol since CSS can control the scale as needed. Styles can also be applied to create custom themes for icons. Do you need to change the default black icon to Missouri State maroon? Simply write a new style to target that class and it’s done. Additionally, new symbols can be added by simply cutting and pasting the new symbol code directly into the SVG sprite file. Gone are the days when you have to run countless individual graphics through a sprite generator and do frustrating CSS math to get them to display correctly. SVG sprites offer an impressive level of flexibility without compromising file size.

See the Pen SVG Icon Sprites by Chris Austin (@chrisaustin) on CodePen.

SVG icon sprite
Filesize: 5kb uncompressed, 1kb compressed (gzip)
Hover styles have been set to show how the same icon set can be “themed” through the use of CSS.

Responsive and adaptive logos

Another challenge introduced with multiple resolutions and device widths is getting relatively detailed graphics such as logos to work at various breakpoints. A logo that is readable and properly scaled at desktop dimensions may become muddled once it is viewed on a phone. One solution has been to use CSS to swap out the graphic designed for desktop with one that is thoughtfully designed for mobile. Again, this creates multiple assets that have to be managed and extra load time to display higher-resolution graphics.

Similar to how specific symbols can be referenced in an SVG sprite, you can use several symbols to make up a larger graphic such as a logo and then utilize CSS to turn on or off these symbols at different breakpoints. For example, the Missouri State University logo that includes the Carrington icon and wordmark may look great on a desktop view, but become indiscernible at tablet scale. CSS and media queries can hide the icon and allow the wordmark to scale up to a more appropriate size. As we go down to phone scale even the wordmark may be too much, so we can show just the icon and hide the wordmark making better use of the space. All of this can be accomplished with one SVG logo and thoughtful use of CSS and media queries.

See the Pen SVG Responsive Logos by Chris Austin (@chrisaustin) on CodePen.

This sample SVG logo is designed to show and hide certain elements at specific breakpoints and is fully responsive in between each breakpoint.

Charts and infographics

Charts and infographics add another level of visual interest to a site and can help communicate overly technical data. A beautifully illustrated infographic designed for print does not usually translate well to the web, though. The common fix is to slice up the infographic into a series of JPGs or PNGs. This rather heavy-handed approach requires lengthy alternative text or supplementary content to make this data accessible to visually impaired users and can negatively impact a page’s load time.

Remember how SVG images are simply XML documents? That means they can contain tagged text that is accessible to humans, assistive technologies and search engines. Additionally, it can be copied and pasted as well as printed at full resolution. Add to that the ability to be animated and styled by CSS and you have a robust and efficient way to present compelling data.

See the Pen SVG Charts and Infographics by Chris Austin (@chrisaustin) on CodePen.

Sample SVG infographic
SVG infographics contain fully accessible content that can be readily selected for copying and pasting into other documents.

Back to the future

Now that we are chomping at the bit to fill our websites with SVGs, we pause and ask ourselves, “Why aren’t SVG images more prevalent?” Two words: Internet Explorer. The behemoth that is IE did not support the SVG standard until IE 9. That means up until 2011 a huge chunk of the browser market was unable to utilize even basic implementation of SVG images. But there are promising days ahead. Virtually everyone can now reliably view SVGs on the web in all major browsers and enjoy the many benefits they offer. Even better, the web development community is rallying behind the merits of SVG and educating about best practices and techniques that take a seemingly archaic and almost-forgotten web technology and catapult it into one of the most relevant ones of modern web design.

Case study

So where does this meet Missouri State University’s web development efforts? We are always looking for innovative and appropriate ways to accurately and efficiently deliver web content to all of our audiences. With some of our primary goals including mobile-friendly delivery and content that meets accessibility standards, SVG images have been on our radar for a while. And now that browser support is much broader, we are able to readily implement SVGs within our sites.

Our first effort was the recent update to the president’s legislative guide website. This site is a companion to a print piece that is delivered to Missouri legislator’s updating them on how Missouri State has met various goals over the previous year. The website is often referenced throughout the year from a variety of devices and by a variety of audiences and is laden with charts and graphs. This combination made the legislative guide website a perfect opportunity to implement SVG images.

Screenshot of infographics from the legislative guide website

Result

Being our first foray into SVGs, the preparation and optimization efforts took a bit longer than if we had used traditional PNGs. But the payoff was huge: we saved about 50 kb on the page titled “The Value Option” and another 170 kb on the about page with graphics looking crisp at any size.

Additionally, the data within each infographic is accessible to assistive technologies and can readily be copied and pasted by legislators and administrators for annual reporting and other documentation making it a more useful reference source.

Posted in Redesign, Technical | 1 Comment

Blogging inspiration: share an event

In this series we inspire you to create fun, insightful blog posts, which help convey an inviting, communicative atmosphere to current and prospective students.

A post we loved

Haven’t posted for a while? Don’t worry. We found inspiration in a recent post from the College of Arts and Letters  about an art professor’s work, which was on display at the Nerman Museum of Contemporary Art. The post included details about the pieces on display and a link to a slideshow.

We liked that this post provided a snapshot of a current event and included images that bring readers to the scene — even if they are unable to travel to the exhibit.

Blogging tip

Want to keep your readers in the loop without renovating your website? Be sure to integrate your blog into your website. This enables readers to see excerpts of your latest posts without leaving your site. You can add blog feed to your site by following these instructions. Need help? Contact the help desk or visit an open lab.

Posted in Web and New Media, WordPress Blogs | Tagged , , , , | Leave a comment

Share the Fall 2016 #BearGrads experience

Missouri State University’s fall 2016 commencement ceremonies will take place Friday, Dec. 16, 2016 at JQH Arena.

Key details

Share your story

Help us celebrate our #BearGrads by sharing your experience on social media. If you are graduating or attending graduation to celebrate with someone, we want to hear about it. You may even see yourself featured on Missouri State’s social media channels.

We encourage you to join the conversation before and during commencement by posting about it on Facebook, Twitter and Instagram and tagging your posts with the official hashtag: #BearGrads.

Make your posts social media savvy

  • Tag your posts with the official commencement hashtag: #BearGrads
  • Share your experience with us by tagging Missouri State University or @missouristate
  • Tag your posts with the Springfield, Missouri hashtag: #SGF
  • If you would like to provide a link for more information on the event, please link to http://www.missouristate.edu/commencement/fall-2016-commencement.htm
  • When you post to Facebook, boost your status update by sharing with a photo or video.
  • Nothing beats a first-hand perspective. If you attend commencement, share photos from or quotes about your experience.

Visual assets

Snapchat

Look for our #BearGrads geofilter on Snapchat Dec. 16 in Hammons Student Center and JQH Arena.

YouTube Live Video

Video

Facebook cover photos

Commencement Facebook cover photo Commencement Facebook cover photo Commencement Facebook cover photo Commencement Facebook cover photo

Twitter cover photos

Commencement Twitter cover photo Commencement Twitter cover photo Commencement Twitter cover photo Commencement Twitter cover photo

Instagram photos

Commencement Instagram photo Commencement Instagram photo

GIFs

BearGrads GIF BearGrads GIF BearGrads GIF BearGrads GIF BearGrads GIF BearGrads GIF

Digital wallpapers

Add #BearGrads digital wallpaper to your desktop or phone screen.

Sample social media posts

  • Congratulations to our #BearGrads! We’re proud of you!
  • Can’t make it to commencement? Watch the ceremonies live online at YouTube #BearGrads
  • #BearGrads has a new member, and it’s my (son, daughter, friend, etc.) (@TagThePerson).
  • What’s your favorite college memory? Share using #BearGrads.
  • Graduating on Friday? Share your photos from the day using #BearGrads.
  • See what our #BearGrads have to say about commencement day: http://bit.ly/1Hlgn1C. Join the conversation with #BearGrads
Posted in Social Media, Social Media Kit, Web and New Media | Tagged , , , , | 1 Comment

Recap: Making Your Statement in a Digital World

boomer-computersWe recently presented Making Your Statement in a Digital World, a comprehensive training session for Missouri State website, blog and social media managers.

The session was presented in two parts.

  • Part 1 focused on writing for websites and blogs and also provided strategic tips for managing communications across all digital platforms, including social media.
  • Part 2 dove deep into the social media universe and discussed strategies for storytelling and audience engagement across a variety of platforms.

Key takeaways from Part 1

Websites

  • Your audience views your website as the place to get information. An effective website is accurate, consistent and organized.
  • In order to create an effective website, you must first identify your audiences.
  • You’ve also got to identify your goals — what you want people to do when they visit your site.
  • Once all of your website’s stakeholders have agreed on audiences and goals, write them down so that you can all stay on track.
  • Want to test the effectiveness of your site? Ask someone (who doesn’t normally use it) to find something on it.

Blogs

  • A blog is a great place to build a relationship with your audience.
  • Someone who visits your blog expects it to be a chronological journal of what’s happening in your unit, which means sharing time-sensitive information isn’t a problem — as long as you’re keeping your blog up-to-date in general.
  • Use classic storytelling tools, like perspective, conflict and tension, to create blog posts that resonate with your audience.
  • A blog makes a great content repository. Consider using blog posts for the most in-depth version of your news and events and distributing shorter variations of the post across your social media channels.

Social media

  • Good social media is interactive and unpretentious and should look effortless — even though good social media management requires a lot of effort.
  • Don’t dive into every social media channel at once. Pick ones that help meet your strategic communication goals.
  • When deciding whether to take on a new social media channel, analyze whether it’s a good fit for your goals, target audience and current resources.
  • Identify the ideal audience member for your social media. Get specific with the details; even consider giving that person a name. This will make it easier to create conversational, personal social posts.

The Missouri State brand

We also provided a brief overview of Missouri State’s new brand, which helps unite all university communications through consistent messaging and visual elements. Key points included:

  • The Missouri State brand messaging, which helps break down Missouri State’s attributes into tangible benefits for our students.
  • The personality of branded content, summarized as pragmatic and optimistic; engaged and tenacious; geniune and grounded.
  • Visual assets, which unite Missouri State communications with a common color palette, design and typography.
  • More information is available through the Missouri State brand website and blog.

Access the presentation

Key takeaways from Part 2Go Bears GIF

Facebook

  • Use Facebook Pages to share your organization’s story and connect with your fans
  • Facebook Pages help you become
    • Discoverable
    • Connected
    • Timely
    • Insightful
  • That it’s social media’s biggest platform is a benefit for reach, but a challenge for organizations to acquire attention
  • Promote transparency. Allow anyone to publish to your page or tag you in photos
  • Post videos directly to Facebook to boost your posts’ reach

Twitter

  • Act like your own biggest fan
  • Always respond to questions and concerns from your audience
  • Focus on linking to mobile-friendly content
  • Think about your voice. An institution does not have to sound institutional
  • Use precise university-branded hashtags
    • #MSUBears (athletics)
    • #GoMaroon (student engagement, traditions, etc.)
    • #BearGrads (commencement)
    • #CitizenBear (public affairs)
    • #BearsHomecoming (homecoming)

Visual Platforms

  • Visual content captures our attention more quickly than text
  • Use Instagram if your organization lends itself to visual storytelling, but note the platform focuses on consumption, not interactivity
  • YouTube reaches more 18-49-year-olds than any cable network in the United States
  • However, there’s no formula for making a video go viral
  • Use aggregators to combine cross-platform posts around a theme or hashtag

Access the presentation

Posted in Social Media, Training | Tagged , , , , , | Leave a comment

Recap: 2016 Public Affairs Convocation on social media

Sonia Nazario, Pulitzer Prize winning journalist and author of Enrique’s Journey, recently spoke to the Missouri State and Springfield communities about her life, career and thoughts on the complex issues surrounding immigration.

The conversation extended to social media, where attendees shared their reactions on Facebook, Twitter and Instagram.

Selected social media posts

Posted in Social Media, Web and New Media | Tagged , , , , | Comments Off on Recap: 2016 Public Affairs Convocation on social media

Social Media Kit: Community Engagement Project

Community Engagement Project: Bear Blitz

Want to help alleviate poverty in the Ozarks but don’t have much time? You can contribute as little as an hour during the Community Engagement Project: Bear Blitz. MSU students, alumni, faculty and staff are taking the Public Affairs Mission to the streets of Zone 1 (Northwest Springfield) the week of Nov. 14-19 in an effort to help families overcome the challenges they face.

Do your part as a #CitizenBear!

Key details

  • What: Community Engagement Project: Bear Blitz
  • When: Monday, November 14 through Saturday, November 19, 2016
  • Where: Northwest Springfield
  • Community Partner: Drew Lewis Foundation

Featured Events

  • What: Assist with dinner preparation and childcare coverage
  • When: 4:30-7:30 p.m., Nov. 17, 2016
  • Where: The Fairbanks

Share the story

Help us spread the word about this event with Missouri State and local communities by sharing it on social media. If you are at the event, we want to hear about your experience!

We encourage you to join the conversation during the Bear Blitz by posting about it on social media. Tag your posts with the official Missouri State Public Affairs hashtag: #CitizenBearRemember to wear your maroon and white for a special edition takeover of BearWear Friday.

Make your post social media savvy

Photos

The following photos are available for your use:

Facebook

Twitter

Instagram

Sample tweets

  • Share your blessings before Thanksgiving break by helping with Bear Blitz goo.gl/SL4p0V
  • Take a study break and spend an hour being a #CitizenBear goo.gl/SL4p0V
  • Grab your BearWear and help the @cityofsgf goo.gl/SL4p0V
  • Make your lunch break somebody’s whole year- volunteer #CitizenBear goo.gl/SL4p0V

Sample Facebook posts

Example 1

  • Post: Start your ‘Friendsgiving’ celebration early by volunteering with fellow Bears at Drew Lewis Foundation during Bear Blitz from Nov. 14-19th.
  • URL: goo.gl/D357GN

Example 2

  • Post: Before heading home for Thanksgiving break, help folks right here in Springfield during Bear Blitz going on from Nov. 14th-19th.
  • URL: goo.gl/D357GN

Example 3

  • Don’t have a lot of free time, but want to see real change? Join fellow Bears this week and commit as little as an hour to help our neighbors in Northwest Springfield #CitizenBear.
  • URL: goo.gl/D357GN
Posted in Social Media, Social Media Kit, Web and New Media | Tagged , , , , , | Comments Off on Social Media Kit: Community Engagement Project