Jak zapisać plik SVG ze strony internetowej na moim komputerze?

16

Muszę pracować z logo z tej witryny (w lewym górnym rogu):

wprowadź opis zdjęcia tutaj

Oto fragment kodu, który skopiowałem ze strony:

<svg viewBox="0 0 215 50" height="50" width="215" xmlns="http://www.w3.org/2000/svg"><path d="M128.783 40.08v7.74h2.078v-5.66h18.843v5.66h2.08v-7.74h-3.322V5.82h-14.017c0 14.588-.467 23.26-2.596 34.263h-3.064zm-43.58 2.08h4.154V5.82h-4.153v3.116l-9.138 24.352V5.818h-4.153V42.16h4.153v-3.114l9.138-24.35v27.465zm-22.842 0h4.36l-6.904-21.08 4.83-15.262h-2.13l-4.88 15.263H52.08V5.82h-4.155V42.16h4.156v-19h4.048l6.233 19zm71.562-2.08c1.764-10.433 2.492-18.842 2.598-32.186h7.783V40.08h-10.38zm74.6 2.08h4.31L204.894 5.82h-4.31l.88 4.206-6.852 32.137h2.13l2.59-12.097h6.548l2.643 12.098zm-169.574 0h4.31L35....8zm147.355 0h4.158V5.82h-13.968v2.076c-.05 8.05-.414 18.12-1.143 23.204-.466 3.066-1.61 5.508-3.532 5.508v5.555c3.588 0 4.623-4.83 5.246-9.24.936-6.752 1.4-16.976 1.506-25.025h7.732V42.16zM159.88 7.896h9.347V5.818H155.73V42.16h13.497v-2.08h-9.348V20.564h7.265v-2.076h-7.266V7.895zm-59.1 0h9.34V5.818H96.626V42.16h13.496v-2.08h-9.34V20.564h7.266v-2.076h-7.265V7.895zm-96.2 0h8.306v34.267h4.152V7.895h8.306V5.818H4.58v2.077zm28.396 6.023l2.858 14.067h-5.66l2.802-14.067zm169.58 0l2.853 14.067h-5.66l2.807-14.067z"></svg>

Nie jestem w tym wprawny, ale próbowałem już wkleić go do pliku tekstowego z dalszym zapisywaniem jako „.svg”, ale wszystko na próżno.
(Może coś jest nie tak z tagami)

PS: Wszystko w porządku z prawami autorskimi! Po prostu nie mogę się teraz skontaktować z innym projektantem z tej witryny, aby poprosić o wektor.

website-design svg save Aksana Zinchanka
źródło
2
Czy otrzymałeś pozwolenie na użycie / dostosowanie logo? Możesz wpaść w poważne kłopoty, jeśli po prostu przejdziesz po Internecie, kradnąc logo. A jeśli poprosili cię o zmianę, dlaczego nie poprosić ich o pliki źródłowe?
PieBie
Pracuję teraz z tymi mediami, po prostu nie mogę skontaktować się z jednym z ich projektantów z prośbą o wektor!
Aksana Zinchanka
Wygląda na to, że robisz to dobrze, powinieneś po prostu móc zapisać kod jako .svg, a następnie otworzyć go w edytorze wektorów obsługującym svg. W jaki sposób to nie działa? Jakie programy graficzne wypróbowałeś? A jaki edytor tekstów (Mac textedit uwielbia rujnować rzeczy w zaskakujący sposób)
user56reinstatemonica8
1
Jak mówi użytkownik, po prostu wklej go do edytora tekstowego i dodaj .svgna końcu nazwy podczas zapisywania. W zależności od ustawień systemu operacyjnego może nadal dodawać niewłaściwe rozszerzenie, np logo.svg.txt. Jeśli tak, po prostu zmień jego nazwę bezpośrednio (bez ponownego zapisywania) i usuń niepoprawne rozszerzenie (.txt). Zasadniczo powinien on otwierać się poprawnie, jeśli pełna nazwa pliku kończy się na .svg.
Dom

Odpowiedzi:

20

Możesz uruchomić ten kod na konsoli javascript:

var e = document.createElement('script');
e.setAttribute('src', 'https://nytimes.github.io/svg-crowbar/svg-crowbar.js'); 
e.setAttribute('class', 'svg-crowbar');
document.body.appendChild(e);

lub skorzystaj z tego bookmarkletu. Działa dla mnie idealnie:

wprowadź opis zdjęcia tutaj

Anibal
źródło
1
Tak, to działa, ale może dodać komentarz wyjaśniający, że to uruchomienie jest skryptem innej firmy na ich stronie? nytimesCzasy skrypt jest chyba w porządku, ale jest to niebezpieczne habbit nauczać.
Tom
W Safari działało to lepiej niż w Chrome
MicroMachine
3

Fragment, który opublikowałeś, jest nieprawidłowym kodem XML. Potrzebuje deklaracji XML, a <path>tag musi zostać zamknięty.

<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 215 50" height="50" width="215" xmlns="http://www.w3.org/2000/svg">
    <path
    d="M128.783 40.08v7.74h2.078v-5.66h18.843v5.66h2.08v-7.74h-3.322V5.82h-14.017c0 14.588-.467 23.26-2.596 34.263h-3.064zm-43.58 2.08h4.154V5.82h-4.153v3.116l-9.138 24.352V5.818h-4.153V42.16h4.153v-3.114l9.138-24.35v27.465zm-22.842 0h4.36l-6.904-21.08 4.83-15.262h-2.13l-4.88 15.263H52.08V5.82h-4.155V42.16h4.156v-19h4.048l6.233 19zm71.562-2.08c1.764-10.433 2.492-18.842 2.598-32.186h7.783V40.08h-10.38zm74.6 2.08h4.31L204.894 5.82h-4.31l.88 4.206-6.852 32.137h2.13l2.59-12.097h6.548l2.643 12.098zm-169.574 0h4.31L35....8zm147.355 0h4.158V5.82h-13.968v2.076c-.05 8.05-.414 18.12-1.143 23.204-.466 3.066-1.61 5.508-3.532 5.508v5.555c3.588 0 4.623-4.83 5.246-9.24.936-6.752 1.4-16.976 1.506-25.025h7.732V42.16zM159.88 7.896h9.347V5.818H155.73V42.16h13.497v-2.08h-9.348V20.564h7.265v-2.076h-7.266V7.895zm-59.1 0h9.34V5.818H96.626V42.16h13.496v-2.08h-9.34V20.564h7.266v-2.076h-7.265V7.895zm-96.2 0h8.306v34.267h4.152V7.895h8.306V5.818H4.58v2.077zm28.396 6.023l2.858 14.067h-5.66l2.802-14.067zm169.58 0l2.853 14.067h-5.66l2.807-14.067z"
    />
</svg>

Nawet po naprawieniu tych rzeczy, jeśli otworzę to w Inkscape, nadal nie wygląda to tak jak logo na stronie. Prawdopodobnie lepiej jest wypróbować coś takiego w celu wyodrębnienia pliku SVG.

Pisarz
źródło
Skopiowanie go za pomocą przeglądarki Firefox, albo przez Inspektora obiektów (który dodaje a </path>) lub bezpośrednio przez Źródło strony (które nie) daje mi plik SVG, który można otworzyć za pomocą programu Illustrator - i wygląda dokładnie tak , jak logo na stronie.
usr2564301
3

Jeśli używasz Safari na macOS, masz do tego wbudowaną funkcjonalność. Po prostu kliknij prawym przyciskiem myszy obraz SVG, kliknij „Zapisz stronę jako ...”, a następnie wybierz „Format: Źródło strony” w wynikowym menu rozwijanym.

wprowadź opis zdjęcia tutaj

wprowadź opis zdjęcia tutaj

Kazimierz
źródło
Wydaje się, że to nie działa, jeśli logo nie jest dostępne za pomocą kodu (na przykład osadzone w klasie) - gdy nie jest to zwykłe kliknięcie, użytkownik może załadować obraz lub przeciągnąć i upuścić na pulpit lub przeglądać programistę zasoby strony menu
MicroMachine
-3

Skopiuj adres URL, a następnie otwórz go w Inkscape. Bułka z masłem!

Alexandra
źródło
Cześć Alexandra, witaj w GDSE i dziękuję za odpowiedź. Czy możesz podać nam trochę więcej informacji? Jak otworzyć link w Inkscape? Jakie opcje menu wybrać? Załóżmy, że Pytający jest początkujący w oprogramowaniu i jesteś w większości dobry. Dzięki! Jeśli masz jakieś pytania, odwiedź centrum pomocy lub ping z jednym z nas na czacie z grafiką, gdy Twoja reputacja będzie wystarczająca (20). Kontynuuj wkład i ciesz się stroną!
Vincent
-4

Pewnie. Utrudnij, jeśli chcesz - ale tak nie jest. Otwórz plik .svg w nowym oknie przeglądarki. Wybierz Drukuj -> Zapisz jako pdf -> Otwórz w programie Illustrator lub innych aplikacjach wektorowych. :)

Ben dziesięć
źródło
5
Masz już SVG - po co to komplikować, dodając krok do pliku PDF?
Michael Schumacher