웹 사이트에있는 SVG를 컴퓨터에 저장하려면 어떻게합니까?

16

이 웹 사이트 의 로고로 작업해야합니다 (왼쪽 상단 모서리).

여기에 이미지 설명을 입력하십시오

페이지에서 복사 한 코드는 다음과 같습니다.

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

나는 이것에 익숙하지 않지만 이미 ".svg"로 더 저장하여 텍스트 파일에 붙여 넣기를 시도했지만 모두 헛된 것입니다.
(태그에 문제가있을 수 있습니다)

PS : 저작권은 괜찮습니다! 현재이 사이트의 다른 디자이너에게 연락하여 벡터를 요청할 수 없습니다.

website-design svg save

— 악사 나 친찬 카
소스

2

로고 사용 / 적응 권한이 있습니까? 웹 '스틸 링'로고를 둘러 보면 심각한 문제가 발생할 수 있습니다. 그리고 그들이 당신에게 그것을 변경하도록 요청했다면 왜 소스 파일을 요청하지 않습니까?

— PieBie

나는 지금이 미디어로 작업하고 있는데, 나는 그들의 디자이너 중 한 명에게 연락하여 벡터를 요구할 수 없습니다!

— Aksana Zinchanka 2016 년

그것은 당신이 올바르게하고있는 것처럼 들립니다. 코드를 .svg로 저장 한 다음 svg를 지원하는 벡터 편집기에서 열 수 있어야합니다. 이것은 어떤 방식으로 작동하지 않습니까? 어떤 그래픽 프로그램을 사용해 보셨습니까? 그리고 텍스트 편집기 (Mac textedit는 놀라운 방식으로 물건을 망치는 것을 좋아합니다)

— user56reinstatemonica8

1

사용자가 말했듯이 텍스트 편집기에 붙여 넣고 .svg저장하면 이름 끝에 추가 하십시오. OS 설정에 따라 여전히 같은 확장명이 추가 될 수 있습니다 logo.svg.txt. 그렇다면 이름을 직접 바꾸고 (다시 저장하지 않음) 잘못된 확장자 (.txt)를 제거하십시오. 기본적으로 전체 파일 이름이로 끝나는 경우 올바르게 열립니다 .svg.

— Dom

20

자바 스크립트 콘솔에서이 코드를 실행할 수 있습니다.

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

또는 이 북마크를 사용 하십시오 . 나를 위해 완벽하게 일했습니다.

— 애니 발
소스

1

예, 작동하지만이 실행이 해당 페이지의 타사 스크립트라는 설명을 추가 할 수 있습니까? nytimes배 스크립트는 잘 아마이지만, 가르 칠 위험 habbit입니다.

— Tom

이것은 Chrome보다 Safari에서 더 효과적이었습니다.

— MicroMachine

3

게시 한 스 니펫이 유효한 XML이 아닙니다. XML 선언이 필요하며 <path>태그를 닫아야합니다.

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

그 것들을 고친 후에도 Inkscape에서 열면 여전히 웹 사이트의 로고처럼 보이지 않습니다. SVG를 추출하기 위해 이와 같은 것을 시도하는 것이 좋습니다.

— 낙서 꾼
소스

Firefox를 사용하여 Object Inspector ()를 추가 </path>하거나 Page Source (직접 제공하지 않음) 를 통해 Firefox로 복사하면 Illustrator에서 열 수있는 SVG가 표시되며 사이트의 로고와 똑같이 보입니다 .

— usr2564301

3

macOS에서 Safari를 사용하는 경우이를위한 내장 기능이 있습니다. SVG 이미지를 마우스 오른쪽 버튼으로 클릭하고 "다른 이름으로 페이지 저장 ..."을 누른 다음 결과 드롭 다운 메뉴에서 "서식 : 페이지 소스"를 선택하십시오.

— 카시미르
소스

코드를 통해 로고에 액세스 할 수없는 경우 (예 : 클래스에 임베드 된 경우) 작동하지 않는 것 같습니다. 마우스 오른쪽 버튼을 클릭하지 않은 경우 사용자가 이미지를로드하거나 데스크탑으로 끌어서 놓거나 개발자를 찾을 수 있습니다. 메뉴 페이지 리소스

— MicroMachine

-3

URL을 복사 한 다음 Inkscape에서여십시오. 쉬워요!

— 알렉산드라
소스

안녕하세요 Alexandra, GDSE에 오신 것을 환영합니다. 답변 해 주셔서 감사합니다. 좀 더 자세한 정보를 제공해 주시겠습니까? Inkscape에서 링크를 어떻게 열 수 있습니까? 어떤 메뉴 옵션을 선택해야합니까? Asker가 소프트웨어의 초보자이고 대부분이 좋다고 가정하십시오. 감사! 궁금한 점이 있으면 평판이 충분 하면 도움말 센터를 방문 하거나 그래픽 디자인 채팅 에서 우리 중 한 명을 핑하십시오 (20). 계속 기여하고 사이트를 즐기십시오!

— Vincent

-4

확실한. 원하는 경우 복잡하게 만드십시오. 그러나 그렇지 않습니다. 새 브라우저 창에서 .svg 파일을 엽니 다. 일러스트 레이터 또는 다른 벡터 앱에서 인쇄-> PDF로 저장-> 열기를 선택하십시오. :)

— 벤텐
소스

5

당신은 이미 SVG를 얻었습니다-왜 PDF에 단계를 추가하여 SVG를 복잡하게합니까?

— Michael Schumacher 2016