Змінення розміру SVG у html?

Отже, у мене є файл SVG в HTML, і одне з речей, які я чув про формат, - це те, що він не отримує всіх пікселів, коли збільшуєш його.

Я знаю, що в jpeg або що б я не міг його зберігати як значок 50 на 50, а потім насправді відображати його у вигляді піктограми 100 на 100 (або 10 на 10), вручну встановлюючи висоту та ширину у image_src тег.

Однак SVG-файли, здається, використовуються з тегами об'єкта / вбудовування, і зміна висоти чи ширини ТОЗ просто призводить до виділення більше місця для зображення.

Чи є якийсь спосіб вказати, що ви бажаєте, щоб SVG-зображення відображалося меншим або більшим, ніж воно фактично зберігається у файловій системі?

Відкрийте свій .svgфайл за допомогою текстового редактора (це просто XML) і шукайте щось подібне вгорі:

<svg ... width="50px" height="50px"...

Стерти атрибути ширини та висоти; значення за замовчуванням - 100%, тому воно повинно поширюватися на все, що дозволяє контейнер.

Спробуйте такі:

1. Встановіть відсутнє вікно перегляду та заповніть значення висоти та ширини заданих атрибутів висоти та висоти у тезі svg

2. Потім просто масштабуйте зображення, встановивши висоту та ширину на потрібні відсоткові значення. Удачі.

3. Встановіть фіксовану пропорцію за допомогою preserveAspectRatio="X200Y200 meet(наприклад, 200 пікселів), але це не обов'язково

напр

 <svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="10%" 
   height="10%"
   preserveAspectRatio="x200Y200 meet"
   viewBox="0 0 350 350"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.0 r9654"
   sodipodi:docname="namesvg.svg">

Ви можете змінити його розмір, відображаючи svg в тезі зображення та розмірі тега зображення, тобто

<img width="200px" src="lion.svg"></img>

Зміна ширини контейнера також виправляє його, а не змінює ширину та висоту вихідного файлу.

.SvgImage img{ width:80%; }

Це виправляє мою проблему перегляду розміру svg. ви можете надати будь-який% на основі вашої вимоги.

Я вважав, що найкраще додавати viewBoxі preserveAspectRatioатрибути до своїх SVG-файлів. Вікно перегляду має описувати повну ширину та висоту SVG у формі 0 0 w h:

<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 700 550"></svg>

Використовуйте наступний код:

<g transform="scale(0.1)">
...
</g>

Ось приклад отримання меж за допомогою svg.getBox(): https://gist.github.com/john-doherty/2ad94360771902b16f459f590b833d44

Наприкінці ви отримуєте номери, які можна підключити до svg, щоб правильно встановити вікно перегляду. Потім використовуйте будь-який css на батьківському діві і все закінчено.

 // get all SVG objects in the DOM
 var svgs = document.getElementsByTagName("svg");
 var svg = svgs[0],
    box = svg.getBBox(), // <- get the visual boundary required to view all children
    viewBox = [box.x, box.y, box.width, box.height].join(" ");

    // set viewable area based on value above
    svg.setAttribute("viewBox", viewBox);

У мене є файл SVG в HTML [....] Чи є спосіб вказати, що ви хочете, щоб зображення SVG відображалося менше або більше, ніж воно фактично зберігається у файловій системі?

SVG-графіка, як і інші творчі твори, захищена законом про авторські права у більшості країн. Залежно від юрисдикції, ліцензії твору чи того, хто ви є власником авторських прав, ви не зможете змінювати SVG, не порушуючи закон про авторські права , вірите чи ні.

Але закони є складними темами, і іноді просто хочеться зробити лайно. Тому ви можете налаштувати масштаб графіки, не змінюючи саму роботу, використовуючи imgтег за допомогоюwidth атрибутом у вашому HTML.

Використання зовнішнього запиту HTTP для визначення розміру:

<img width="96" src="/path/to/image.svg">

Визначення розміру розмітки за допомогою URI даних :

<img width="96" src="data:image/svg+xml,...">

SVG можна оптимізувати для URI даних для створення зображень SVG Favicon, придатних для будь-якого розміру:

<link rel="icon" sizes="any" href="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%23000'/%3E%3C/svg%3E">