SVG is the better option for Apple Black Friday dates

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.

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?”

• CodePen: CodePen Home Re-coding Apple’s Black Friday dates
• CodePen: Re-coding Apple’s Black Friday dates in SVG

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.