{
    "version": "https:\/\/jsonfeed.org\/version\/1",
    "title": "Техноблог, заметки с тегом: svg",
    "home_page_url": "https:\/\/blog.toliklunev.ru\/tags\/svg\/",
    "feed_url": "https:\/\/blog.toliklunev.ru\/tags\/svg\/json\/",
    "icon": "https:\/\/blog.toliklunev.ru\/user\/userpic@2x.jpg",
    "author": {
        "name": "Анатолий Лунёв",
        "url": "https:\/\/blog.toliklunev.ru\/",
        "avatar": "https:\/\/blog.toliklunev.ru\/user\/userpic@2x.jpg"
    },
    "items": [
        {
            "id": "47",
            "url": "https:\/\/blog.toliklunev.ru\/",
            "title": "Создание гибких, поддерживаемых круговых диаграмм с помощью CSS и SVG",
            "content_html": "<p><i>Это перевод статьи Леи Вероу <a href=\"http:\/\/www.smashingmagazine.com\/2015\/07\/designing-simple-pie-charts-with-css\/\">Designing Flexible, Maintainable Pie Charts With CSS and SVG<\/a><\/i><\/p>\n<p>Когда дело доходит до CSS-приёмов, нет никого более упёртого и умного в поиске решений любой проблемы чем Леа Вероу. Не так давно, Леа написала, отредактировала и опубликовала <a href=\"http:\/\/shop.oreilly.com\/product\/0636920031123.do?cmp=ex-web-books-videos-product-na_smashing_mag_excerpt\">Секреты CSS<\/a>, реально фантастическую книгу об маленьких CSS-хитростях и приёмах для решения повседневных задач. Если вы думали, что знаете CSS достаточно хорошо, подумайте еще раз: вы будете удивлены. В этой статье, мы покажем немного крутых вещей из книги, которые были представлены также в <a href=\"https:\/\/vimeo.com\/channels\/smashingconf\/132511382\">недавнем выступлении Леи на СмешингКонф Нью-Йорк<\/a> — о создании простых круговых диаграмм с помощью CSS. Пожалуйста, учтите, что некоторые демки могут не работать так, как ожидалось из-за ограниченной поддержки в браузерах. — прим. ред.<\/p>\n<p><b>Круговая диаграмма<\/b>, в простейшем случае фигура из двух цветов, традиционно была чем-то непростым для создания с помощью веб-технологий, и в тоже время невероятно удачным подспорьем для отображения информации начиная от простой статистики до прогресс-баров и таймеров. Они обычно реализовывались либо с помощью графического редактора, в этом случае создавалось <b>несколько изображений, для нескольких значений круговой диаграммы<\/b>, либо с помощью тяжелых JavaScript фреймворков, в случае более сложных диаграмм.<\/p>\n<p>И хотя добавить диаграмму не так сложно, как это было раньше, до сих пор нет простого способа. Однако есть несколько хороших, поддерживаемых реализаций, которые пригодны для использования на сегодняшний день.<\/p>\n<p><h2>Решение, основанное на трансформациях<\/h2><\/p>\n<p>Это лучшее решение в плане разметки: нам нужен только один элемент, всё остальное будет сделано с помощью псевдо-элементов, трансформаций и CSS-градиентов. Начнём с добавления элемента:<\/p>\n<pre class=\"code\"><code data-language=\"html\"><div class=\"pie\"><\/div><\/code>\n<\/pre>\n<p>В этом месте, давайте предположим, что нам нужна круговая диаграмма, которая захардкожена под отображение 20%. Мы разберём, как сделать это более гибко позднее. Давайте стилезуем элемент под круг, который будет нашим фоном.<\/p>\n<style>\r\n\t#pie-0 > div, #pie-50 > div, #pie-pseudo > div{\r\n\t\twidth: 100px;\r\n\t\theight: 100px;\r\n\t\tborder-radius: 100%;\r\n\t\tbackground: yellowgreen;\r\n\t}\r\n<\/style>\n<p><figure id=\"pie-0\"><\/p>\n<div><\/div><p><figcaption>Фигура 1: Наша точка отсчёта (или диаграмма, отображающая 0%)<\/figcaption><br \/>\n<\/figure><\/p>\n<pre class=\"code\"><code data-language=\"css\">.pie {\r\n\twidth: 100px; height: 100px;\r\n\tborder-radius: 50%;\r\n\tbackground: yellowgreen;\r\n}<\/code>\n<\/pre>\n<p>Наша диаграмма будет зелёной (точнее жёлто-зелёной), с коричневой частью (#655), отображающей проценты. Мы могли бы попытаться использовать косые преобразования для процентной части, но, как показывает опыт, в итоге получается говнокод. Вместо этого, мы раскрасим левую и правую часть нашего круга в наши 2 цвета, и будем использовать вращающийся псевдо-элемент, чтобы отобразить тот процент, который нам нужен.<\/p>\n<p>Чтобы раскрасить половину нашего круга коричневым, мы используем простой градиент:<\/p>\n<style>\r\n\t#pie-50 > div, #pie-pseudo > div{\r\n\t\tbackground-image: linear-gradient(to right, transparent 50%, #655 0);\r\n\t}\r\n<\/style>\n<pre class=\"code\"><code data-language=\"css\">background-image:\r\n  linear-gradient(to right, transparent 50%, #655 0);<\/code>\n<\/pre>\n<p><figure id=\"pie-50\"><\/p>\n<div><\/div><p><figcaption>Фигура 2: Правая часть нашего круга стала коричневой, с помощью простого градиента <\/figcaption><br \/>\n<\/figure><\/p>\n<p>Как вы можете видеть, на  фигуре 2 есть всё, что нам нужно. Теперь мы можем приступить к стилезации псевдо-элемента, который будет выступать в качестве маски.<\/p>\n<pre class=\"code\"><code data-language=\"css\">.pie::before {\r\n\tcontent: '';\r\n\tdisplay: block;\r\n\tmargin-left: 50%;\r\n\theight: 100%;\r\n}<\/code>\n<\/pre>\n<style>\r\n#pie-pseudo > div:before{\r\n\tcontent: '';\r\n\tdisplay: block;\r\n\tmargin-left: 50%;\r\n\theight: 100%;\r\n\toutline: 1px dashed;\r\n\tcolor: rgba(0, 0, 0, 0.4)\r\n}\r\n<\/style>\n<p><figure id=\"pie-pseudo\"><\/p>\n<div><\/div><p><figcaption>Фигура 3: Псевдо-элемент, который будет действовать как маска, показан пунктирными линиями<\/figcaption><br \/>\n<\/figure><\/p>\n<p>На Фигуре 3 вы можете видеть, где наш псевдо-элемент находится, по отношению к диаграмме. Сейчас он не стилизован, и нечего не перекрывает. Это всего лишь невидимый прямоугольник. Перед стилизацией уясним несколько моментов:<\/p>\n<ul>\n<li>Так как мы хотим перекрыть коричневую часть нашего круга, нам нужно применить зелёный фон к псевдо-элементу, используя<\/li>\n<\/ul>\n<pre class=\"e2-text-code\"><code>background-color: inherit<\/code><\/pre>",
            "date_published": "2015-08-08T20:49:49+04:00",
            "date_modified": "2015-08-09T18:04:01+04:00",
            "_date_published_rfc2822": "Sat, 08 Aug 2015 20:49:49 +0400",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/blog.toliklunev.ru\/",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": []
            }
        },
        {
            "id": "39",
            "url": "https:\/\/blog.toliklunev.ru\/all\/bystry-sposob-poluchit-svg-iz-vektornogo-sloya-v-fotoshope\/",
            "title": "Быстрый способ получить svg из векторного слоя в фотошопе",
            "content_html": "<p><strong>Данный способ работает только в Photoshop CC.<\/strong><\/p>\n<p>Первым делом создаём в домашней папке пользователя файл generator.json, со следующим содержимым:<\/p>\n<pre class=\"e2-text-code\"><code>{\r\n  &quot;generator-assets&quot;:  { \r\n    &quot;svg-enabled&quot;: true\r\n  }\r\n}<\/code><\/pre><p>Файл можно скачать (<a href=\"http:\/\/blog.toliklunev.ru\/download\/generator.json\" download=\"generator.json\">generator.json<\/a>), для ускорения процесса.<\/p>\n<p>Ставим галку в меню File → Generate → Image Assets.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.toliklunev.ru\/pictures\/image-assets.png\" width=\"451\" height=\"657\" alt=\"\" \/>\n<\/div>\n<p>Затем переименовываем нужный слой, даём ему любое имя, заканчивающиеся на .svg (например pic.svg).<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.toliklunev.ru\/pictures\/pic.svg.png\" width=\"280\" height=\"225\" alt=\"\" \/>\n<\/div>\n<p>И вуаля. Рядом с psd файлом получаем папку, в которой будет лежать готовый svg.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.toliklunev.ru\/pictures\/svg-in-folder.png\" width=\"677\" height=\"108\" alt=\"\" \/>\n<\/div>\n<p>Можно переименовывать даже группу слоёв.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.toliklunev.ru\/pictures\/group.svg.png\" width=\"387\" height=\"355\" alt=\"\" \/>\n<\/div>\n<p>Фотошоп довольно умно сгенерирует единый svg файл, учитывая все эффекты слоёв.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.toliklunev.ru\/pictures\/svg-code.png\" width=\"745\" height=\"875\" alt=\"\" \/>\n<\/div>\n",
            "date_published": "2014-11-04T02:23:17+04:00",
            "date_modified": "2017-01-18T23:41:29+04:00",
            "image": "https:\/\/blog.toliklunev.ru\/pictures\/image-assets.png",
            "_date_published_rfc2822": "Tue, 04 Nov 2014 02:23:17 +0400",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/blog.toliklunev.ru\/all\/bystry-sposob-poluchit-svg-iz-vektornogo-sloya-v-fotoshope\/",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": [
                    "https:\/\/blog.toliklunev.ru\/pictures\/image-assets.png",
                    "https:\/\/blog.toliklunev.ru\/pictures\/pic.svg.png",
                    "https:\/\/blog.toliklunev.ru\/pictures\/svg-in-folder.png",
                    "https:\/\/blog.toliklunev.ru\/pictures\/group.svg.png",
                    "https:\/\/blog.toliklunev.ru\/pictures\/svg-code.png"
                ]
            }
        }
    ],
    "_e2_version": 3254,
    "_e2_ua_string": "E2 (v3254; Aegea)"
}