Stuff & Nonsense product and website design

Blog and all that malarkey

SVG is the better option for Apple Black Friday dates

After writing yesterday’s blog entry on Re-coding Apple’s Black Friday dates I realised I had missed the bleedin’ obvious solution. That instead of wrangling CSS and HTML, SVG could’ve been the better option.

SVG is scaleable—the clue’s in the name—and my goal was to make Apple’s Black Friday dates design flexible. I mainly create and export graphical elements from Figma and Sketch. Making a replica of Apple’s four dates took only a few minutes.

Apple’s Black Friday deals page https://www.apple.com/uk/shop/gifts/shopping-event

Then, I optimised the output using Jake Archibald’s SVGOMG before hand-editing to add CSS styles and accessibility improvements including a title and/or description:

<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 780 180" class="announce-dates">
<title>Dates for Apple’s special shopping event</title>
…
</svg>

There are several basic shapes (primitives) in SVG including rectangles (rect,) ellipses (ellipse,) lines (line,) and circles (circle.) I wanted my circles to be 180px, so the radius is 90:

<circle cx="90" cy="90" r="90" />

Rather than add fill properties to every circle, I moved this style to CSS:

.announce-dates circle {
fill: #fff; }

I grouped each circle with the two day and date text elements and positioned these using x/y coordinates.

<g>
<circle cx="90" cy="90" r="90" />
<text class="day"><tspan x="75.193" y="41">Fri</tspan></text>
<text class="date"><tspan x="35" y="140">25</tspan></text>
</g>

Again, I wanted to avoid repetitive fill and font properties in my SVG, so I moved these styles to CSS too:

.announce-dates .day,
.announce-dates .date {
font-family: SFPro-Regular, SF Pro, Helvetica; }

.announce-dates .day {
fill: #e30000;
font-size: 26px;
letter-spacing: .5; }

.announce-dates .date {
fill: #1d1d1f;
font-size: 96px;
letter-spacing: -1; }

That took care of the shared styles for all four of the dates in the design. Initially, all dates overlap on the left of the SVG viewBox. So to position the second, third, and fourth dates, I add translate values to each group (g) which take into consideration the width of each date and the gaps between them:

<g transform="translate(200)">
<circle cx="90" cy="90" r="90" />
<text class="day"><tspan x="70.588" y="41">Sat</tspan></text>
<text class="date"><tspan x="34" y="140">26</tspan></text>
</g>

<g transform="translate(400)">…</g>
<g transform="translate(600)">…</g>

That SVG is now ready for me to embed into an HTML document, but the most important question remains; “When should I choose SVG over CSS/HTML?”

When to choose CSS/HTML or SVG depends on how graphical a design element is. If Apple’s design was just a list of dates, maybe with some fancy typography, perhaps arranged in a grid, I would stick to CSS and HTML. But, in this design, the circular dates include precisely positioned elements which—in Apple’s code—needed a convoluted combination of Flexbox, line-height, and positioning to implement them.

Such complicated CSS and the extra HTML elements in Apple’s code make very little practical sense, especially when SVG is easier to write, smaller in size, and even more flexible.


Written by Andy Clarke who tagged this with css, svg


More from Stuff & Nonsense

Andy Clarke demonstrates how to take your product and website designs to the next level.

Take your Squarespace designs to the next level with our premium Squarespace templates.

The popular web design contract template trusted by thousands of web designers and developers.

Andy is an experienced mentor who can help you improve your design skills and develop your career.


Hire me. I’m available now to work on product and website design projects.