Поскольку «Макбук» у меня с «ретиной», я давно озаботился тем, чтобы продукт, разработкой которого я управляю, хорошо смотрелся и на «ретине» тоже. Я считаю за такими экранами будущее и не грех позаботиться об этом будущем уже в настоящем. Если уж и не внедрить везде, так хоть научиться верстать.

Одним из главных помощников в такой вёрстке является, без сомнения, формаг СВГ — формат векторной графики, который на данный момент поддерживают все распространённые браузеры (включая ИЕ, с девятой версии). Особенно приятно, что его можно включать прямо внутрь ХТМЛя, это очень удобно — если СВГ используется для кучи мелких значков на странице, то не будет лишних соединений с сервером — ведь всё грузится вместе с основным кодом.

Но встаёт другая проблема — проблема повторного использования. Если одни и те же значки присутствуют на странице в изобилии, страница будет распухать, что печально.

К счастью, есть выход. СВГ — гибкая штука, в этом формате есть возможность использования частей изображения повторно. Первым шагом нужно определить тег-контейнер с необходимыми нам изображениями, по одному в теге symbol. У каждого из них будет собственный идентификатор, по которому мы ниже будем на них ссылаться:

<svg style="display:none">
    <symbol id="folder" viewBox="0 0 49.833 67.167">
        <!-- код не рабочий, только для примера -->
        <path d="M15.938,67.…"/>
        <path d="M3.59,30.531c…"/>
    </symbol>
    <symbol id="file" viewBox="0 0 49.833 67.167">
        <path d="M12.233c0.…"/>
        <path d="M3.28C2.76…"/>
    </symbol>
</svg>

Тут у нас два изображения — folder и file, на которые мы можем сослаться следующим образом:

<svg width="28" height="37">
    <use xlink:href="#folder"/>
</svg>

<svg width="28" height="37">
    <use xlink:href="#file"/>
</svg>

Таких вставок может быть сколько угодно и все они будут использовать одни и те же изображения, описанные в теге-контейнере. Остаётся даже возможность лёгкой настройки под себя, например, можно задать парочку классов и раскрасить часть изображения в разные цвета:

svg.green {
    fill: green;
}

svg.red {
    fill: red;
}

Классы можно повесить на ссылающиеся теги СВГ, жаль только этот способ полон ограничений. Кроме как в ФФ более избирательные селекторы использовать не удаётся — всё, что ниже тега use для таблицы стилей как будто не существует. Если и есть какой-то способ это починить, я его не нашёл.

Пару месяцев назад я взялся переводить в электронный вид книгу Арканова, Горина, Успенского и Камова «Четверо под одной обложкой». Меня она заинтересовала тем, что из одного рассказа, содержащегося в ней, растут ноги известнейшей фразы «рояль в кустах». К сожалению, в интернете книги не оказалось. Я, с большим трудом разыскав одного из немногочисленных её владельцев, получил от него сканы и приступил к переводу в электронный вид.

Несмотря на очень хорошее качество сканированного материала, некоторые страницы пришлось перепечатывать полностью — столько в них было ошибок, я использовал для распознавания бесплатную программу, видимо поплатился качеством. Правда продвигался быстро — за пару дней прошёл две трети книги, а потом всё застопорилось — совсем не стало времени в связи с работой. И вот недавно, поторапливаемый нетерпеливым читателем, я работу возобновил, и в очень медленном темпе, буквально сегодня утром, перед отпуском всё закончил.

Это был интересный для меня опыт, теперь я не понаслышке знаю как тяжёл труд тех, кто распознаёт редкие книги, хотя в моём случае чашу сполна я не испил — книга относительно небольшого размера.

Хочу так же сказать огромное спасибо Денису Олеговичу Стребкову за предоставленные сканы!