.svg-image-map-tutorial.md
# Easy, Interactive, and Scalable Image Maps using SVGs
## Requirements
- A vector art program which can export SVGs (eg. Adobe Illustrator, Inkscape, Affinity Designed, Figma, Krita, etc.)
- An image to make the map on. This does _not_ have to be vector.
## Steps
This file has been truncated. show original
image-0.png
�PNG
IHDR,���i�sRGB���gAMA���a pHYstt�fx#�IDATx^��{���}���^�ޥ�]BH+!$Y ��;���_�tܴM��ؓN:әƓ^�ig�:u��_Nݺ��vjw��B|�mp�o��0�$!$t�V{�=��y���������g��y�<�y�@���<o����l$���
�HG��,�t �HG��,�t �HG��,�t �HG��,�t �HG��,�t �HG��,�t �HG��,�t �HG��,�t �HG��,�t �HG�ҙW����-�;գ��hD[��M����l�ynmm�=�$�o�4}��C��fL���؉�q������/Dm����]��3�Ց��^�y,ʗ��[��k��EgO)ʌ�b�����ݻc��_��������g�X�q{L�����=�͙�O`a��������ڣ��X�������}�=���O������
!&�����=ջg��"�KV�����3�$fg�ќ*��ҳhi,Z=T�������:�t/Z]}��9=]ǁ����X=ˡ:�տ8�գ�:����ٙ�z�����ѻtU}�����f�zPGWO�/[]���7���͙���*�n���U��@Q>�95�ոe/��n����Ӈ��tu��ټ�^vu���h߳�>>=1#GD���:f<��{u`Xv���p�b��c��+��096S#���;bp���p��б��k�gpyL���Ϸ��[c���ȱ15:]����F��c��������7��r�k_W��>:{��o���^[������O��YǪ�]U_Ϻ�_Sϖ(�8q�X������n�Uۮ�����=���}Stv��؉#u�Y��[b���U��z��h������j�����Pf-��p��ճ���FGG#�}�K11|<�\r],^�!���]�{���;b��-��;_�O����6ű�\�Ek6Ʊ'~㧎Ew�`�����3 �{�l�1.|ŭ1~�P����]���e6��G��ѓ�z۵���Q�����7Ħ��<��ף�ш�s�Y#�ƅW�^���O����r
��Sqb������Ӈ���������P-�[l4gf�e�E�Q,ݰ����w$�}����7>{����]�2V\�=V
�KA��}�ķ>{�wO<���DZ'~�]�s'}e9���'b���=��|��}|��8���ķ?��uP)�#����g�=XΑ�?�>��T5�̨�]��>ߩ�Ǟj��ꜻ��hFz���c���՛��|�8Y��k] ,L"X���E{G�~��و����r���O�ǚ�S������z��e���O��.���zo�ǿ���<}�>�Ӕ�-�y���cfj♽%ʝ<JT(�h��!=��G���q�e7����uW������>��E?3=Y?��鱑({����,�6�\_G��ёR ��dbv6�͙zFY^Rf.T��eF�W�����(�t>���R^��Y�%N�k���KGN����au��&�����������W>���ѧb|�X}��E��ס�Ă����?�R��Ig��0x�g�B��u�>e߉r�Тl�YϒX�<�-�����gz�%#����x���C��;_����?}���W>{n��K'0�̻`���������+o�o����7���%15v:N��U/�������e����Y���<6������_[_��o�s���OF���W>c�5����[�Z/!X�>G{����е��5�\�zMl�����Y?MYbR��,Z��ޟ��X���]B��/�K�m�%�ַ"-�+-w�8�зb��RL�>�#ñj��1t�kc����M-w��b���z��Ӈ���_^�|Ֆ+��$;���1r�j����#���=c'�w�(_W�)�R��plώ�۞�/����>���?�mS{���7-�|v����Tߢt�ж8�w������.�����;��RƗ}6�������+���_������c��
Q���Pٶ!��W�a�ً�z��x��W��V}��l���Q���%�tt�֛vN��VG~��(Jt�ht��k� e_
�Y5�������z������ֳ�)m�8���b�捭W���#3��3�z�`I '���ؾ���(���c��}�l���R�mk���}�#϶�T3���q���ƙ`��;ś6w��>��w�}|��q[S`a��3,:N>m�[G`k���ϋ�>Xln;�1�:
�Tt���_��5X|���q��ݭ��p==Ҍ��?b�_�H'���˷^�zun���$��ƙ%!W��l9����/������,b���[n������uK[G�ܹ�[��P���Ƴ�96������h>�:���w���Oi��ٚ��Ɖ��T�����/�xE�(pf�����ut���ut�����`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:��N����l�y*�W��ֳ�ٞ���q����ZG�lZ�w\��z��#�����֫9Ó��9�&:��j���/[�槴����UC�W�V��|�����,6��H,�jk9��c��}�l���R�mk���}�#϶�T3���q���ƙ`��;ś6w��>��w�}|�{X�@:�~I��cmc�u��fG|����bIȼm��͙�QX���b��'X�*���b�g��ǿ�:
W�oy�x�l� �z�ś������>�k��gfX�u˹gW���- �e9���������#��,N��֫�����l~J,��=,�t KB`�����[��~��3`�,`���_�Ķ;b�{Q�m��둻���?i
KB`������9f�b���,<��Sn�����+�Vn�6�I���F��,`�k��m�~qGl[���r��Q����l�����q��X��^��E�s�t��`����;��X9~�s_h��9��M7`(KB����֫��Y}�ߺ�3�'.Z�Q}я�sr&��g*�y|"f��ʟy��/�}��=�1Ռ:������U����-����}���;����l�Կ$��q�Ʈx���֑9��O�'vN��5�pr[��[74���l������������7v�F�y��L||�x��s
|��뱯�^��O�T�����=~����mcW<rl:�����{eo�bM#z;�□���W��[�v��.��+:��������'�{��h3��3'ƛ���cJ�8[��Q��֚ Q4����g�-�i�.l�e+;�鑙:P�ǁ�fL���A�\��/�7l��o�%���y�?oXۈ+V��ͳ���Ĵ�����FG[lY��\���=����o?��xp<�����.���k������3Y�3�;��Y''�����c15�̈��
�vm#~����V}fY�QBE��Q���pFOum%f|��T}��U�Vw휨����X3�_zb2�z:&�[+�]���,c�ƕ�'vLԿp~,`�*3VT_�{;#~X}�/K8&gfc��8:֬g7���*>��x|���?+�����jL��Q�ł�����-����V7�_\�W�j�3;�^=�2�fu���})wW���q������|Ug}�����>����?�Ǔ�3���Qfq�e!%�\[�}c5�̶(������S��#�%RD���� Q���%�q�`G
��o�eO��(��RfR|t�x'��������[�Y�_|����������?������������'��Y�g�wQ��@W[\8�Q/Ky������u��_�W/?Y��^�Y�#�12���xf좎�����2��_�^�W/)c�����<5x��L|���x˖�x�����o�C��>�̩(w�(w�0�Qǀ�粞�z��s7�(�7J�8p��u�����Ɠ�����R��������O>2Qo�Y6�|su�m̽���L����cnɛ��č��X`a,`�*�(�6�/��v�׳+�����G�clj.j��U���Η����|g$����x�7Gbtz6~���:\��,ʞ�`[O\��#>���x��L�ukOl�^�}��r]�N�Գ7>��X|�щ��#����$ʦ�e�s)c��|���~�2�ӻƫ�D�4g�e.�����'X�<U�O���-�{�N�{��?��X���d}�2S�K.ζ��=._�Y�m�j�����7OL�C����5���g��5��Kz�;���~�ey�o^�Sޙ��x�iIG�qgY�Q�cյ��RbE��'>K��b�`G}[��{gƖ۰�c�;�X���u�շ&���=���w�;..��=��w�^��Bʲ���q���:0�[���e?�c�����g<�Q���?�?`,v������0?88���Y��o���u�܌�������z�Ʈ�31�"�g��&e&G�Գ���������=99��c���cpp��Z����K���;Z�支��{�u�k/���6�U���U�z�ħ�����r_��5k���L�wp:NO�m�y�P#^�zn���bIO{��D����KJʝ=>:ǫ?���(ʹJD(wy擪'�1�qf�eQ�떡��T}�7�M��<NU�}�k6v�35�̐ãͨ.�~��
���+�,�o�����<W�#wG��=�W�B X�<p�`QL6K4h�a�p`�_�;��=Q�oq�����С��}g6�|������j|���N�=OL��0�V^=w�F &��P����:X}�puާ��������=*�V����љ:���,3;����c�~����c��du�\Xxچ����� ��
7��[��z�|eW����/�䅔}'ʒ�����E�_D٪���V__Y6����;��?��Ǿ�z,����|�/�R��XQ�Tc�̆����({`��P���=�/2�� ��ƞoE���^q���;-�Ȧ�0O�M��lGW4���mzT���oG�C�����[����¦�@:���@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@:���`�#X�@2�"�r����IEND�B`�
image-1.png
�PNG
IHDR�!{��sRGB���gAMA���a pHYstt�fx��IDATx^����=�v݇ս��ᄒ�|�ERb#�b���(��)G� �J�@��� � ����/0�(����eG�-٦lnD���;Q�#������o��sΪU�k�]����}������֚ḵ�jjU�}�y���_2tttttttttttttttt���{GGGGGGGGGGGGGGG�M�:ttttttttttttttt<�O��CGGGGGGGGGGGGGG�SA�����������������T�:ttttttttttttttt<�O��CGGGGGGGGGGGGGG�SA�����������������T�:ttttttttttttttt<�O��CGGGGGGGGGGGGGG�SA�����������������T�:ttttttttttttttt<�O��CGGGGGGGGGGGGGG�SA�����������������T�:ttttttttttttttt<�O��CGGGGGGGGGGGGGG�SA�����������������T�:ttttttttttttttt<�O��CGGGGGGGGGGGGGG�SA�����������������T�:ttttttttttttttt<�O��CGGGGGGGGGGGGGG�SA�����������������T�:ttttttttttttttt<�O��CGGGGGGGGGGGGGG�SA�����������������T�:ttttttttttttttt<�O��CGGGGGGGGGGGGGG�SA�����������������T�:ttttttttttttttt<<3�{�������g�7<�|&���������������v�s�����<������sx�Ǿe��ҫ�z�����K����O���/
o��+�=g�s������7����������������[��x�������;��������/�A�|_���~������:����9�+ /���û?��Û_���7~���<~�%oo�y���~"��lx�燗�����_���O�'�������g�ʿ=����φ�/�6|������gc�������W/^|���W����W�9<y�xx����W�5����m��Go~�2�����K��>�
��w�:ϟ6P����1�{�����UÃW^�<z�_�x�^|������=��5w�0������K��e���[n��^x����2���[owU�����k~�Ǭ�s����C��:::::::::::::��L=tx�7}��_��ç~��;��_>�^|�}~ �������_��W��^�������o~��[������}�k����?����^x�=Û������;~px�����O~|x������U����������O�����Ç����w��=H��w���K�K�z���A�������_7')��M��z����?���7~�Ó'O������۾[��N6H�?0�}����O���|�w���������WH��������������������g���o����?�����7����p�ν����hx㳟>�Ϳkx��z��/���l����g�w~��_�������������k���?�w�P��~l������K����n�?�m�ǟD�������G���/}�׆_�����;��|*���oo~�3�~���?G��P��7|���
���_�ܻ7|H|������#�����|��u������OI���÷�O��Ow��w�?�k�x�%���~�u;:::::::::::::��x��=��G���~���˯������O�/�?�_�o���g��w����/��}�{��[�W�����o�[������_��O���o�;���?�����?��W3>�+??��O������G���?��'~��?�_������_?�S
���{����+���?�7���7����Ɇ��n����n���G����7�p��w�T>������/����?|㋩����������������g���s�?7<瞏�ܽ7���Յ/|�W����[�t��7�俩�n��5���*��OJ<��J�������ܧ�w��x�"��7ƿ�����W�_�x��^~���>��d��������|ؿB��z���M���/�����������������������T<��0~�7�o}��<E8���'O�Ǐ����� Б�����Y��ON��'Gp����/xy��?����5����O���]z����FGGGGGGGGGGGGG�V<��!��W�9���c�{���_���O�?@�����a7��|�~��"�Ó|�൏|��P���}�����M �����;�3<x�]�7��Y�_���������?������_������/}�Siy��O=\�𣣣������������Y�3���ν������>����J�c��G� �����?7|�ڿ�����a��G��ؑ��O���I����������{��?�O_���I����x���%���G��G�w}��:|�3�o�����x�{����o�����c���U����s��5�U�W?�Q��
�tttttttttttttt|%�����f��_�
�;?���7��+L�������r�����T�7>�����vx�7~�n�������g��{��'�{�s����=_��.�7|�5��������_�e�������}���?��"�s��x�;
<��/�����/�:�������K����w��ܒ �V����|��m��/�����/���whx닟��?�C��w'��v��O\�O:_~����~�m��������������x;��_�?u�[�����:�N�����ý��+y6�s�y�{��}�������;�_��|�_P��m&��{�7�'1�;[����_���y����?�ȣg_������[�o�����:�ί?^�����::::::::::::::���C�O�s����=����~qx�����Ɨ��ÿ���8�k��̙�������/��:::::::::::::��z��o�ث�����;ǟ��_�������C�g�_fvtttttttttttttt�=�L���g��������������������`<wx�ޯ�����3����/�����Z��li�[�S�s��K����~�USXM���`k.���*OR:?�݈��&�m� �T�ӪZۭ��j��l��14���4��T�T�=�-�h�c[�}���`��I�Ӊ�^�a�%�{�`��ľ�
Q�j�Wu�ڃ���:m��x��s{l�\Ӿ6��V��I��v������c[ت?���.�'�a�'>��s��۽l�4W�
{4�e|���ǖ:{lSN����m�su��ߣ),�k)T�-�[c�bކ���IJ����������7���C�k����k?����f�<]������8>q?��ޣ����������=�̍���2����6<w��<��G��Qt{�?~�AO�v���6������w{�B?�G�J��~�����<"�yr��}A��M�{QEu�Z�{�#�0�:['���f��/]!��~:Cv�=�6�p��t�����f��ü�uN�w%��f�����G��
�>�
��É��+�.��ָV������O�A]l����8�� 5A��uD<����~�N��s�z+U���*��j�y��<;^'�-�o��J�+����91��_�O6]�RP����^9
�'���Q�+'�c���s ����O�!>e7~;X5~�����.��\�A��h���j��cn"�=��M���c;��%�G{���x���聪0��;������5HP��`T%j1�y? �`[�#�۠9����J1
��#���@Ŵ�t<'�m��:�G�o#���� M~wh���,��m��
Qwd\�~`_6�Y������h��O�=�*k�?�k*av��V�ZB�lͽ�����:�*�v*�?�c��(�7���3y�����佨iC��6�������e���x�����3[aS�
�?� kB?Uݙ��~��ï������D�H�A�� �X��c�B ���b�{. �7Z\��e'|~��;�cAbC��ש$���O*�c�ͦ�_vg�'�4�0�8��#q|���O.��
��4B:�����}д���&��D�&f���ɝ�G;m#V�U�'5\��h��HS|П�j�'�.N�/���>��N���FX�H��a����<b���Ƥ��H*1�b�v�[ğr��}7"��A9𧏊?e#���y��;���?�z�>�|b��.�6����6�������P�a��A�xH;��?n�g<g���m0w��}�?��%Ǒ�~4�����Hp3��<���9�0�W;_+ɦ�Ѐ5_3��)̹Yt�\m����l݀>�-�NJ�<��(A���v. �.Z��{5��.�mCk\
x�n^�J�c���x|�sK�A��>�l���]J�h�~���2�>Ʀ��>ȪU�h
;�&��Ϲ�7 ����k�m�MX[_;R�ۖ���(5�5`\�����m���nR�����{��1��!�z� �c��)^�K���U[��-y�&���oZ�Zރ�v|;�9�C����4���c�yqLWMchɵ����4� ��ۡĺ�p�qz�>���m���͔?ӝ����nA�=��I��5ֹw��?$�9�_eM��Ʌiǫ�9�¾4�}C����3��h�z��Y���(�ڞI����Q�{���;:�$�[��l-��zP���ϫ�,?�@��#멜�x
B�D���g��k�y��e�P~������{�ݻ�x�,t��8E��T��+���y�z�ϻ�,k��҄�R�����
�G���� �w�'�5I�$�G�O2��s�����=駬
(�^Qz.�T�>Ab�ژD�E�7���}������{�W�˩��\y�~�����i��E7|Ԣ�"�2/Hm����g�?xp�����S��t���G
����}�w�W��ȷ��x,_��x�~��s@Qf�5���}��-��q[����������N�����"��b�5���e
This file has been truncated. show original
There are more than three files. show original