{ "version": "https:\/\/jsonfeed.org\/version\/1", "title": "Кирилл Беляев: заметки с тегом на практике", "_rss_description": "о подаче информации, айдентике, интерфейсах и жизненной среде", "_rss_language": "ru", "_itunes_email": "", "_itunes_categories_xml": "", "_itunes_image": "", "_itunes_explicit": "", "home_page_url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=tags\/practice\/", "feed_url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=tags%2Fpractice%2Fjson%2F", "icon": "https:\/\/kirillbelyaev.com\/ru\/blog\/user\/userpic@2x.jpg?1662385101", "author": { "name": "Кирилл Беляев", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/", "avatar": "https:\/\/kirillbelyaev.com\/ru\/blog\/user\/userpic@2x.jpg?1662385101" }, "items": [ { "id": "477", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/svg-icons\/", "title": "СВГ-иконки на практике", "content_html": "

Кроме разрешения и веса, СВГ-иконки умеют удобно хранить несколько состояний. Так не в силах ни один растр. Количество состояний — признак, по которому делю иконки на «сплошные» и «слоёные».<\/p>\n

Если иконка работает, как ссылка — целиком меняет цвет при наведении (или посещении), то про себя называю её «сплошной». С ней можно работать вслепую, не заглядывая внутрь. Говорим через ЦСС всему СВГ: «будь при наведении красным», и всё.<\/p>\n

\n\"\"\n<\/div>\n

А если цвет меняют отдельные части, называю иконку «слоёной». Потому что такие игры возможны, только когда внутри СВГ формы лежат в отдельных элементах друг над другом — слоями.<\/p>\n

\n\"\"\n<\/div>\n

Когда появляется такое поведение, первая идея — применить ЦСС-бордер к сплошной иконке. Но лучше не торопиться. Бордер всегда позиционируется по центру. Если контур однопиксельный, браузер нарисует линию в два полупрозрачных пикселя. И иконка станет мыльной на неретиновом экране.<\/p>\n

\n\"\"\n<\/div>\n

Даже если контур будет кратным, сглаживание углов бордером или выход за пределы иконки могут мешать. Поэтому лучше положить в СВГ отдельные слои и управлять ими.<\/p>\n

\n\"\"\n<\/div>\n

При этом слой с формой в виде обводки не сработает. ЦСС покрасит не только внешнюю форму, но и внутреннюю.<\/p>\n

\n\"\"\n<\/div>\n

Если иконка слоёная, обратиться через ЦСС ко всему СВГ не получится. Нужно манипулировать элементами внутри. Это легко с инлайновым СВГ — добавил классы к нужным элементам и готово. Иконка фулскрина в карточке на сайте лаборатории<\/a>:<\/p>\n

\n\"\"\n<\/div>\n
<svg class="full-screen" xmlns="http:\/\/www.w3.org\/2000\/svg">\r\n  <g>\r\n    <path d="M7,7 L7,8 L6.00097656,8 L6.00097656,9 L5,9 L5,8 L0,8\r\n    L0,18 L10,18 L10,13 L9,13 L9,12 L10,12 L10,11 L11,11 L11,10 L12,10\r\n    L12,9 L13,9 L13,10 L18,10 L18,0 L8,0 L8,5 L9,5 L9,6 L8,6 L8,7 L7,7 Z"\r\n    fill="#FFF"\/>\r\n\t\t\t\r\n    <path class="variable" d="M9.538,3.077 L13.935,3.077 L9.538,7.475 L9.538,8.462 \r\n    L10.525,8.462 L14.923,4.065 L14.923,8.462 L16,8.462 L16,2 L9.538,2 L9.538,3.077 \r\n    Z M3.077,13.938 L3.077,9.54 L2,9.54 L2,16 L8.461,16 L8.461,14.924 L4.063,14.924 \r\n    L8.461,10.527 L8.461,9.54 L7.474,9.54 L3.077,13.938 Z" \r\n    fill="#666"\/>\r\n  <\/g>\r\n<\/svg><\/code><\/pre>
Без инлайна сложнее — обращение будет к типу элемента или к атрибуту. Плей в той же карточке:<\/p>\n
\n\"\"\n<\/div>\n
<svg class="play"  xmlns="http:\/\/www.w3.org\/2000\/svg">\r\n  <g>\r\n    <polygon fill="#FFF" points="0 0 0 22 19 11"><\/polygon>\r\n      \r\n    <path class=“play-fill“ d="M2,3L2 19 15 11z" fill="#666"><\/path>\r\n      \r\n    <path class="play-void“ d="M3,4.99999999L3 17 13 11z" fill="#666"><\/path>\r\n  <\/g>\r\n<\/svg><\/code><\/pre>
Допустим, он не инлайновый. Тогда при наведении будем менять цвет только элементов «path». Нижний полигон всегда белый. Верхнему треугольнику стоит задать по умолчанию заливку «none», чтобы обращаться к нему отдельно и управлять его видимостью.<\/p>\n
Если такая иконка будет сплошной, понадобиться ещё один СВГ с белым фоном под ней. Это замусорит код и может привести к ошибкам при масштабировании.<\/p>\n
И ещё момент. Графические редакторы делают такой плей из трёх полигонов, поэтому переводить их в кривые придётся вручную. Я неэлегантно вставляю код в фидл<\/a> и копирую получившуюся кривую в инспекторе.<\/p>\n",
            "date_published": "2016-11-29T22:42:43+03:00",
            "date_modified": "2016-11-29T22:41:09+03:00",
            "image": "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/calendar-icon@2x.png",
            "_date_published_rfc2822": "Tue, 29 Nov 2016 22:42:43 +0300",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/svg-icons\/",
            "_e2_data": {
                "is_favourite": true,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": [
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/calendar-icon@2x.png",
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/star-icon@2x.png",
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/star-border@2x.png",
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/star-layers@2x.png",
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/star-bad-layers@2x.png",
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/full-screen-icon@2x.png",
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/play-icon@2x.png"
                ]
            }
        },
        {
            "id": "472",
            "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/small-icons\/",
            "title": "Маленькие иконки рядом на практике",
            "content_html": "
В веб-приложении есть список сущностей. Например, привычные для меня — таблицы и графики. Поэтому и иконки условных файлов такие.<\/p>\n
\n\"\"\n<\/div>\n
Иногда их удаляют и переименовывают. Это редкие сценарии, которые лучше делать прямо в списке пока объект перед глазами. Если у списка мало места, подойдут иконки.<\/p>\n
\n\"\"\n<\/div>\n
Клик в корзину сразу переносит «файл» в список с удалёнными. А карандаш запускает редактирование имени. Поле ввода закрывает иконки, предохраняя от случайного попадания. Клик мышкой (или клавиша «Ввод») вне поля сохраняет изменения.<\/p>\n
\n\"\"\n<\/div>\n
Задача решена, но есть проблемы — иконки маленькие и стоят близко, поэтому легко попасть в соседнюю (подробнее о законе Фиттса<\/a> у Раскина). Да, и как закончить редактирование не очевидно. Место ограничено, поэтому площадь всплывающей области увеличить нельзя. Увеличить иконки тоже не получится. <\/p>\n
Убираю при наведении иконку типа «файла», и ставлю на её место карандаш. Радую Фиттса, выигрываю в длине текста.<\/p>\n
\n\"\"\n<\/div>\n
Теперь области клика можно сделать сильно больше иконок:<\/p>\n
\n\"\"\n<\/div>\n
И если оставлять карандаш при редактировании, то пусть он завершает редактирование (включение и выключение на одном элементе не редкость).<\/p>\n
\n\"\"\n<\/div>\n",
            "date_published": "2016-10-31T12:36:30+03:00",
            "date_modified": "2016-11-03T18:52:03+03:00",
            "image": "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/files@2x.png",
            "_date_published_rfc2822": "Mon, 31 Oct 2016 12:36:30 +0300",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/small-icons\/",
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/files@2x.png",
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/regular@2x.png",
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/regular-edit@2x.png",
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/change-icon@2x.png",
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/change-icon-click@2x.png",
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/change-icon-edit@2x.png"
                ]
            }
        }
    ],
    "_e2_version": 3572,
    "_e2_ua_string": "E2 (v3572; Aegea)"
}