Zmieniasz rozmiar SVG w html?

Mam więc plik SVG w formacie HTML i jedną z rzeczy, które słyszałem o tym formacie, jest to, że nie jest on rozpikselowany w całości po powiększeniu.

Wiem, że z jpeg lub czymkolwiek innym, co mógłbym zapisać jako ikonę 50 na 50, a następnie wyświetlam go jako (raczej pikselowaną) miniaturę 100 na 100 (lub 10 na 10), ręcznie ustawiając wysokość i szerokość w image_src etykietka.

Wydaje się jednak, że pliki SVG są używane ze znacznikami obiektu / osadzania, a zmiana wysokości lub szerokości TYCH TYLKO powoduje po prostu przydzielenie większej ilości miejsca na obraz.

Czy istnieje sposób, aby określić, że chcesz, aby obraz SVG był wyświetlany w rozmiarze mniejszym lub większym niż faktycznie jest przechowywany w systemie plików?

Otwórz .svgplik w edytorze tekstu (to tylko XML) i poszukaj czegoś takiego u góry:

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

Usuń atrybuty szerokości i wysokości; wartości domyślne to 100%, więc powinno rozciągać się do wszystkiego, na co pozwala na to kontener.

Spróbuj tych:

1. Ustaw brakujące okno widoku i wypełnij wartości wysokości i szerokości ustawionych atrybutów wysokości i wysokości w tagu svg

2. Następnie przeskaluj obraz, ustawiając wysokość i szerokość na żądane wartości procentowe . Powodzenia.

3. Ustaw stały współczynnik proporcji za pomocą preserveAspectRatio="X200Y200 meet(np. 200px), ale nie jest to konieczne

na przykład

 <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">

możesz zmienić jego rozmiar, wyświetlając svg w tagu obrazu i rozmiar tagu obrazu, tj

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

Zmiana szerokości kontenera również ją naprawia, zamiast zmieniać szerokość i wysokość pliku źródłowego.

.SvgImage img{ width:80%; }

To rozwiązuje mój problem ze zmianą rozmiaru pliku svg. możesz podać dowolny% na podstawie swoich wymagań.

Uważam, że najlepiej jest dodawać viewBoxi preserveAspectRatioprzypisywać do moich plików SVG. Pole podglądu powinno opisywać pełną szerokość i wysokość SVG w postaci 0 0 w h:

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

Użyj poniższego kodu:

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

Oto przykład uzyskania granic za pomocą svg.getBox(): https://gist.github.com/john-doherty/2ad94360771902b16f459f590b833d44

Na końcu dostajesz liczby, które możesz podłączyć do svg, aby poprawnie ustawić widok. Następnie użyj dowolnego css w nadrzędnym div i gotowe.

 // 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);

Mam plik SVG w formacie HTML [....] CZY istnieje sposób, aby określić, że chcesz, aby obraz SVG był wyświetlany w rozmiarze mniejszym lub większym niż jest faktycznie przechowywany w systemie plików?

Grafika SVG, podobnie jak inne dzieła twórcze, jest chroniona prawem autorskim w większości krajów. W zależności od jurysdykcji, licencji na dzieło lub tego, czy jesteś właścicielem praw autorskich, możesz nie być w stanie zmodyfikować SVG bez naruszenia praw autorskich , wierz lub nie.

Ale prawa to trudne tematy i czasami chcesz po prostu załatwić sprawę. Dlatego możesz dostosować skalę grafiki bez modyfikowania samej pracy za pomocą imgtagu z widthatrybutem w kodzie HTML.

Użycie zewnętrznego żądania HTTP do określenia rozmiaru:

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

Określanie rozmiaru w znacznikach przy użyciu identyfikatora URI danych :

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

Pliki SVG można zoptymalizować pod kątem identyfikatorów URI danych, aby utworzyć obrazy SVG Favicon odpowiednie dla dowolnego rozmiaru:

<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">