I haven’t turned in a handwritten anything in years. Getting to work on projects that don’t depend on computers is one of the best aspects about my class this semester, especially in the Covid era where everything from work, school, and even socializing depends on screens.
That said, while sketching an identity map for Visual Storytelling in Technical Communication, I realized that optimizing for accessibility would be the perfect way to turn this attempt of self expression into a substantial portfolio piece for my program’s capstone.
Unfortunately, that took me back to the screens, but I found the answer pretty quickly: image maps and SVGs. Image maps depend on hard-coded coordinates, so they are not inherently responsive. I did find some plugins and tools, but they were all obtuse and potentially defunct. Not worth the effort.
Having at least a passing familiarity with SVGs, I picked them. I used Figma to group shapes into id selectors, then added a title, description, and link in HTML, then added a slight animation in SCSS, resulting in this proof of concept:
What I’m currently reading
Adapted from undraw.co.
It’s a responsive, interactive, and accessible image that is easy to customize and maintain. I had originally thought about also putting the book title and author on the cover and spine, respectively, but initially formatting SVGs is already a pain without the added burden of typefaces, kerning, and legibility. Luckily, the content in the <title></title> tags appears as hover text, so I can update my current book for both screens and screen readers alike by changing only one line of code.
I still have to figure out how this works for mobile devices, but this seems promising. This may just be hacky garbage, but it’s my hacky garbage!
The SVG:
<svg width="420" height="420" viewBox="0 0 1008 858" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="reading">
<desc>An image of a person with long hair reading a book.</desc>
<g id="Head">
<path id="Vector" d="M523.52 405.86L459.17 463.56C459.17 463.56 334.9 491.3 365.97 452.46C383.57 430.46 381.23 397.07 375.89 372.25C373.501 360.995 370.183 349.957 365.97 339.25C365.97 339.25 525.77 242.76 503.58 316C497 337.72 496.08 354.47 498.03 367.27C502.69 397.63 523.52 405.86 523.52 405.86Z" fill="white"/>
<path id="Vector_2" opacity="0.1" d="M503.58 316C497 337.72 496.08 354.47 498.03 367.27C479.825 378.542 459.02 384.924 437.626 385.8C416.233 386.676 394.975 382.016 375.91 372.27C373.521 361.015 370.203 349.977 365.99 339.27C365.99 339.27 525.77 242.76 503.58 316Z" fill="black"/>
<path id="Vector_3" d="M556.84 259.4C556.84 283.976 549.553 308.001 535.9 328.436C522.247 348.871 502.842 364.799 480.138 374.206C457.433 383.613 432.449 386.077 408.344 381.286C384.24 376.495 362.097 364.664 344.715 347.29C327.334 329.915 315.495 307.777 310.694 283.675C305.893 259.572 308.347 234.587 317.745 211.879C327.143 189.17 343.063 169.759 363.493 156.098C383.922 142.437 407.944 135.14 432.52 135.13C448.857 135.076 465.043 138.253 480.148 144.478C495.252 150.704 508.976 159.854 520.53 171.404C532.085 182.954 541.241 196.674 547.473 211.776C553.704 226.878 556.888 243.063 556.84 259.4Z" fill="white"/>
<path id="Vector_4" d="M389.99 226.83C401.8 223.59 412.99 216.75 425.18 217.11C438.66 217.5 450.27 226.55 459.66 236.23C470.02 246.9 479.04 258.85 489.8 269.13C500.56 279.41 530.3 393.73 545 396C559.7 398.27 559.48 287.14 567.11 274.4C577.98 256.22 567.66 233.19 567.89 212.01C568.04 198.62 572.56 185.5 572.05 172.12C571.62 160.92 567.69 150.12 563.4 139.81C561.31 134.81 559.02 129.63 555.02 125.92C544.43 116.12 540.1 104.33 526.5 99.5C508.92 93.25 487.92 89.77 477.76 74.12C473.84 68.12 466.76 61.71 460.38 65.01C452.87 68.89 454.91 82.15 447.32 85.87C442.72 88.12 437.1 85.28 433.82 81.35C430.54 77.42 428.65 72.48 425.43 68.51C422.564 65.0765 418.81 62.4966 414.578 61.0522C410.345 59.6079 412.367 84.9046 408 85.87C406.27 86.1564 398.106 61.4365 396.88 62.69C394.46 65.57 395.97 69.86 396.14 73.62C396.72 86.26 381.57 93.28 368.99 94.62C356.41 95.96 354.19 105.3 346.69 115.49C342.69 120.88 329.34 118.72 326.66 124.86C320.44 139.1 305.42 146.86 292.21 155.07C279 163.28 280.69 183.47 280.81 199C280.93 213.93 278.53 217.7 280.81 232.43C282.01 240.25 280.14 248.33 281.64 256.1C284.39 270.36 297.46 279.93 309.52 288.03C312.52 290.03 323.06 321.97 326.66 322C332.66 322.05 329.81 286.61 332.78 281.34C336.838 274.122 340.037 266.453 342.31 258.49C344.4 251.18 343.15 237.63 346.69 231.49C352.73 220.95 377.63 230.22 389.99 226.83Z" fill="#585268"/>
</g>
<g id="Clothes">
<path id="Vector_5" d="M347.13 420.29V647.74L565.71 629.99L529.1 398.1L432.57 455.79L347.13 420.29Z" fill="#E1E7EF"/>
<path id="Vector_6" opacity="0.1" d="M498.33 371.2C498.33 371.2 491.33 403.64 442.56 446.91C442.56 446.91 457.56 451.91 459.76 491.85L478.07 516.85C478.07 516.85 492.49 464.7 518.01 446.95C543.53 429.2 518.01 382.6 518.01 382.6L498.33 371.2Z" fill="black"/>
<path id="Vector_7" d="M498.33 369C498.33 369 491.33 401.44 442.56 444.71C442.56 444.71 457.56 449.71 459.76 489.65L478.07 514.65C478.07 514.65 492.49 462.5 518.01 444.75C543.53 427 518.01 380.4 518.01 380.4L498.33 369Z" fill="#E1E7EF"/>
<path id="Vector_8" opacity="0.1" d="M432.52 446.91C432.52 446.91 411.52 463.56 410.38 490.19C409.24 516.82 398.18 516.82 398.18 516.82C398.18 516.82 370.44 431.39 361.57 423.62C352.7 415.85 377.57 383.08 377.57 383.08C377.57 383.08 391.52 429.16 432.52 446.91Z" fill="black"/>
<path id="Vector_9" d="M432.52 444.7C432.52 444.7 411.52 461.34 410.38 488C409.24 514.66 398.18 514.63 398.18 514.63C398.18 514.63 370.43 429.16 361.52 421.4C352.61 413.64 377.52 380.86 377.52 380.86C377.52 380.86 391.52 426.94 432.52 444.7Z" fill="#E1E7EF"/>
<path id="Vector_10" d="M498.03 369.25L525.77 380.35C525.77 380.35 556.84 400.35 670.01 415.86C670.01 415.86 686.65 415.86 697.75 469.12L839.75 658.85C839.75 658.85 908.54 709.85 850.85 760.93L723.85 774.8C723.85 774.8 797.08 704.9 686.13 702.68L706.66 685.48C706.66 685.48 674.48 655.48 667.83 636.66C661.18 617.84 606.83 596.72 606.83 596.72L613.49 756.49L513.52 772L499.12 474.7C498.427 460.678 499.232 446.622 501.52 432.77C505.32 410.22 509.29 374.5 498.03 369.25Z" fill="#67647E"/>
<path id="Vector_11" d="M377.09 380.34L236.18 417C236.18 417 215.1 403.69 189.58 508L99.71 670C99.71 670 47.52 721 87.52 764.24C127.52 807.48 177.39 786.43 177.39 786.43C177.39 786.43 131.9 715.43 211.79 697.67L241.79 659.95L377.15 675.48L373.76 480.2L377.52 457.44C381.62 432.84 381.62 407.73 377.52 383.13L377.09 380.34Z" fill="#67647E"/>
</g>
<a href="https://www.goodreads.com/book/show/129910.No_No_Boy" target="_blank">
<g id="Book">
<title>No-No Boy by John Okada</title>
<path id="Vector_12" d="M243.52 537.77L230.2 547.75L431.03 598.79V578.82L243.52 537.77Z" fill="#E4E6ED"/>
<path id="Vector_13" d="M631.86 534.44L645.17 544.43L431.03 598.79V578.82L631.86 534.44Z" fill="#E4E6ED"/>
<path id="Vector_14" d="M218 537.77L404.4 581.04L417.71 851.77L254.61 800.73L218 537.77Z" fill="black"/>
<path id="Vector_15" d="M654.05 537.77L455.44 583.26L466.53 855.1L650.72 798.51L654.05 537.77Z" fill="black"/>
<path id="Vector_16" d="M247.96 534.44V542.21L431.03 578.82C431.03 578.82 337.83 544.42 247.96 534.44Z" fill="#D8D9E5"/>
<path id="Vector_17" d="M628.53 530V537.77L431.03 578.82C431.03 578.82 538.64 539.99 628.53 530Z" fill="#D8D9E5"/>
<path id="Vector_18" d="M395.62 574.35C395.62 574.35 428.16 594.35 462.37 574.35L469.03 850.63H415.6L395.62 574.35Z" fill="#212121"/>
</g>
</a>
<g id="Hands">
<path id="Vector_19" d="M684.1 702.18L678.31 703.74C678.31 703.74 640.6 670.74 592.53 720.74C544.46 770.74 608.53 795.21 608.53 795.21C608.53 795.21 674.53 798.04 695.26 785.78C704.182 780.43 713.952 776.646 724.15 774.59C730.385 773.367 736.06 770.165 740.33 765.46V765.46C744.212 761.209 747.094 756.143 748.766 750.634C750.437 745.125 750.856 739.312 749.99 733.62V733.62C748.869 726.149 745.58 719.171 740.532 713.551C735.484 707.93 728.898 703.914 721.59 702V702C709.29 698.803 696.369 698.865 684.1 702.18V702.18Z" fill="white"/>
<path id="Vector_20" d="M183 700C183 700 224.997 664.942 279.367 731.512C333.737 798.082 237.197 799.222 237.197 799.222C237.197 799.222 185.007 811.393 165.077 768.123C145.147 724.853 183 700 183 700Z" fill="white"/>
<path id="Vector_21" d="M689.91 699.47C689.91 699.47 741.5 714.53 730.44 774.06L761.62 770.66L768.2 740.39L754.89 698.23L729.37 688.23L689.91 699.47Z" fill="#67647E"/>
</g>
</g>
</svg>
The SCSS:
#Book {
&:hover {
transform: scale(1.05);
}
transition: all 1s;
transform-origin: 50% 50%;
}
