Как кэшировать значки SVG на внешнем CDN, избегая FOMI?

Question

Я знаю, как получить иконки SVG загрузки на моем сайте, но я не могу понять, как удовлетворить все следующие ограничения:

1. Возможность использования значков SVG в CSS
2. Нет Вспышка недостающие иконки (ФОМС)
3. Минимальный размер начальной страницы
4. Cached SVGs
5. Возможность использования CDN
6. должны быть в состоянии использовать fill: currentColor сделать значок соответствия текущим текс т цвет, так же, как иконописцы шрифты
7. Бонус: Pixel-align the SVGs поэтому они всегда выглядят острый

1,2,3 и 4 может быть выполнены с помощью внешних спрайтов карты как так:

<svg viewBox="0 0 100 100"> 
    <use xmlns:xlink="http://www.w3.org/1999/xlink" 
     xlink:href="/assets/sprite-4faa5ef477.svg#icon-asterisk-50af6"></use> 
</svg> 

Но мы не можем использовать CDN, пока браузеры не зафиксируют CORS issue.

Мы можем поддерживать внешние домены, но я уверен, что это не сработает для CSS, потому что он только наблюдает за DOM (извините, еще не протестировал), а также заставляет ваш браузер сделать целая группа неудачных запросов к файлу, который он не может получить (по одному для каждого значка на странице).

Мы можем использовать CDN, если вместо этого мы либо встраиваем весь SVG (увеличенный размер страницы, без кэширования), либо мы используем AJAX (вызывает FOMI).

Итак, есть ли какие-либо решения, удовлетворяющие всем 7 ограничений?

В принципе, я хочу, чтобы SVG были так же удобны, как иконы-шрифты, или нет переключения точки. SVG поддерживают несколько цветов и являются более доступными, но я не могу заставить их выглядеть такими же хорошими или загружать так же эффективно.

Answer 1

Мое лучшее предположение заключается в использовании data uris, которые имеют pretty great browser support. Через что-то вроде Grunticon или их веб-приложение Grumpicon.

Выходной файл 2 css и 1 js, который должен работать без проблем с вашим CDN.

rendered output очень гибкий и настраиваемый.

Answer 2

для кэша, вы можете попробовать HTML5 приложение кэш https://www.w3schools.com/html/html5_app_cache.asp

Answer 3

Ближайший я мог бы получить в загрузке SVG в элементе изображения, а затем использовать его как «старый-старомодный» image sprite. Это, насколько я могу судить, удовлетворяет всем вашим ограничениям. Единственным недостатком, о котором я могу думать, является то, что вы теряете возможность изменять определенные части SVG с помощью CSS. Это, однако, не одно из ваших ограничений (исправьте меня, если я ошибаюсь), и все еще можно изменить весь значок, как вы можете видеть в моей демонстрации. Я создал fiddle, а для полноты также есть фрагмент кода.

Чтобы эмулировать CDN, я создал файл SVG и загрузил его на какой-либо хостинг изображений. Приношу свои извинения будущим читателям, если эта услуга теперь отключена.SVG-файл просто содержит в себе все значки (я создал черный квадрат, круг и треугольник). Таким образом, разница с SVG-спрайтами заключается в том, что значки находятся в самом SVG, а не в defs. Совсем просто объединить несколько SVG в одном, я не искал инструменты, которые бы автоматизировали этот процесс.

.icon { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 30px; /* can be anything */ 
 
    height: 30px; 
 
    background-image: url('http://imgh.us/icons_36.svg'); 
 
    
 
    border: 1px solid #000; /* just to see where the icon is */ 
 
} 
 

 
/* sizes */ 
 
.icon.large { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-size: 150px auto; 
 
} 
 

 
/* icons */ 
 
.icon.circle { background-position: -30px 0; } 
 
.icon.large.circle { background-position: -50px 0; } 
 
.icon.triangle { background-position: -60px 0; } 
 
.icon.large.triangle { background-position: -100px 0; } 
 

 
/* styles */ 
 
.icon.info { 
 
    /* based on http://stackoverflow.com/a/25524145/962603, 
 
    * but you can of course also use an SVG filter (heh) */ 
 
    filter: invert(100%) sepia(100%) saturate(50000%) hue-rotate(90deg) brightness(70%); 
 
} 
 
.icon.highlight { 
 
    /* based on http://stackoverflow.com/a/25524145/962603, 
 
    * but you can of course also use an SVG filter (heh) */ 
 
    filter: invert(100%) sepia(100%) saturate(10000%) hue-rotate(30deg) brightness(50%); 
 
}

<span class="icon square"></span> 
 
<span class="icon circle"></span> 
 
<span class="icon triangle"></span> 
 
<span class="icon circle highlight"></span> 
 
<span class="icon triangle large info"></span>