Zmieniasz rozmiar SVG w html?

156

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?

html svg Przędzarka
źródło

177

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.

Amadan
źródło

75

Tak, zgadza się, ale musisz też dodać atrybut „viewBox” (np. ViewBox = „0 0 50 50” w przykładzie o wymiarach 50x50px), w przeciwnym razie zawartość może nie skalować się prawidłowo (zależy to od wymiarów kontenera). Scour zrobi to za Ciebie automatycznie, codedread.com/scour .

Erik Dahlström

Brawo! To pomogło! Okazuje się, że miałem już rzeczy w 100% w pliku, ale kluczem było okienko podglądu! Dziękuję wam obu!

Jenny

26

Na wypadek, gdyby nie było to oczywiste dla nikogo innego, „viewBox” rozróżnia wielkość liter. Ponadto pierwsze dwie współrzędne to lewy górny róg, jeśli przycinasz obraz, a dwie drugie współrzędne to szerokość i wysokość przed skalowaniem.

Big McLargeHuge

1

Zwróć uwagę, że zarówno <div style = "width: 50px; height: 50px"> <svg viewBox = "0 0 1000 1000"> ... </svg> </div>, jak i <svg viewBox = "0 0 1000 1000" style = "width: 50px; height: 50px"> ... </svg> będzie działać.

poszerzył się

48

Spróbuj tych:

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
Następnie przeskaluj obraz, ustawiając wysokość i szerokość na żądane wartości procentowe . Powodzenia.
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">

Lorenz Lo Sauer
źródło

24

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

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

Tanveer
źródło

1

Myślę, że problem z używaniem <img> polega na tym, że tracisz możliwości przełączania awaryjnego znacznika <object> (co może być istotne dla użytkowników IE w wersji 8 i starszych).

Nathan Crause,

10

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ń.

user2929588
źródło

8

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>

duhaime
źródło

2

Szczerze mówiąc, to najlepsza opcja. Działa jak marzenie.

Justin

6

Użyj poniższego kodu:

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

Chris P
źródło

4

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

Lawrence Whiteside
źródło

1

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

Josh Habdas
źródło

Zmieniasz rozmiar SVG w html?

Odpowiedzi: