Кэширование SVG файлов.Использовать тег img или svg?

Question

У меня много больших файлов SVG (примерно 200 КБ после уменьшения размера с помощью онлайн-инструментов).Я действительно не хочу, чтобы посетитель загружал весь этот текст с моего сервера при каждом посещении.Я хочу воспользоваться преимуществами кэширования CDN и лака.

Если я использую тег SVG, браузер, CDN или Varnish будут кэшировать код SVG в HTML-документе.SVG не имеет свойства src.

Если я использую тег изображения, он будет кэширован, но тогда я не смогу воспользоваться преимуществами preserveAspectRatio и viewBox, которые есть у тега SVG.Мне бы пришлось иметь дело с div и css для изображений, чтобы поддерживать пропорции при изменении размера окна браузера.Что-то, что вы думаете, будет проще с SVG

Мое текущее разрешение - это css для тега img с svg в атрибуте src.

.myImage{ max-width: 100%; height: auto; max-height: 55vh;}

Что я действительно хочу сделать, так этоэто, но, очевидно, я не могу:

 <svg data='images/mydoc.svg' viewBox="0 0 250 75" preserveAspectRatio="xMinYMin meet">
 </svg>

Я ищу идеи о том, как обращаться с SVG.Действительно ли мне нужно обернуть все мои изображения img tag svg в теги div с помощью css, чтобы сохранить соотношение сторон при изменении размера браузера?Я просто чувствую, что есть более легкий путь, что-то, чего мне не хватает?

Answer 1

Ваш CSS для определения размера делает слишком много и не достаточно одновременно.Вы говорите, что хотите иметь max-width, но не даете ширину.Вы даете только auto рост в дополнение к max-height.Любое изображение размером от 0px до 0px может выполнить эти условия.

Что вы хотите сделать, если SVG очень широкий, но не очень высокий?Мне кажется, вы хотите, чтобы он имел полную ширину 100%, но высоту уменьшать.Что бы вы хотели случиться, если бы SVG был настолько высоким, что он превысил бы ограничение 55vh, если бы растянулся на всю ширину?Мне кажется, вы хотите, чтобы он оставался меньше и двигался влево.

Для этого ваше правило max-width является излишним, а правило width отсутствует.

Вы можетедостичь этого легко (с возможным исключением более старых версий IE ).- В этом примере я устанавливаю SVG в качестве uri данных для источника HTML <img>.Таким образом, он работает так же в отношении CSS и размеров, как если бы это был внешний файл.

.myImage{
    width: 100%; 
    max-height: 55vh;
}

<img class="myImage" src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 75' preserveAspectRatio='xMinYMin meet'><rect width='250' height='75' fill='green'/></svg>">

Здесь указываются viewBox и preserveAspectRatio: они применяются независимо от того, встроен ли SVG или включен из внешнего файла.Вы определяете область для тега <img>, и прямоугольник viewBox помещается внутрь, следуя правилам соотношения сторон.

Короче говоря, если такое поведение по размеру удовлетворяет вашим потребностям, продолжайте.и включайте внешние файлы SVG через теги <img>.