15

I need to work with a logo from this website (in the top left corner):

enter image description here

Here is the piece of code I copied from the page:

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

I'm not very skilled in this, but have already tried pasting it to a text file with further saving as ".svg", but all in vain.
(Maybe something is wrong with the tags)

PS: Everything's okay with the copyright! I just can't contact the other designer from this site to ask for a vector right now.

  • 2
    Did you get permission to use/adapt the logo? You could run into serious trouble if you just go around the web 'stealing' logo's. And if they asked you to change it, why not just ask them for the source files? – PieBie Jun 17 '15 at 10:28
  • I'm now working with this media, I just can't reach one of their designers to ask for a vector! – Aksana Zinchanka Jun 17 '15 at 11:25
  • It sounds like you're doing it right, you should just be able to save the code as .svg then open it in a vector editor that supports svg. In what way is this not working? What graphics programs have you tried? And what text editor (Mac textedit loves to ruin things in surprising ways) – user568458 Jun 17 '15 at 11:35
  • 1
    As user says, just paste it into a text editor and add .svg to the end of the name when you save it. Depending on your OS settings, it may still add the wrong extension like logo.svg.txt. If it does that just rename it directly (not resaving) and remove the incorrect extension (.txt). Essentially, it should open correctly if the full file name ends with .svg. – Dom Jun 17 '15 at 11:54
19

You can run this code on your javascript console:

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

or use this bookmarklet. Worked perfectly for me:

enter image description here

  • 1
    Yes this works, but maybe add a comment explaining that this run's a third-party script on their page? A nytimes times script is probably fine, but it's a dangerous habbit to teach. – Tom Oct 15 '18 at 10:29
  • This worked better for me in Safari than in Chrome – MicroMachine Mar 6 at 1:36
3

The snippet you posted is not valid XML. It needs an XML declaration and the <path> tag needs to be closed.

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

Even after fixing those things, if I open that in Inkscape, however, it still doesn't quite look like the logo on the website. You're probably better off trying something like this to extract the SVG instead.

  • Copying it with Firefox, either through the Object Inspector (which adds a </path>) or straight through Page Source (which does not) gives me an SVG that can be opened with Illustrator - and it looks exactly like the logo on the site. – usr2564301 Jun 17 '15 at 13:14
3

If you're using Safari on macOS, there's built-in functionality for this. Simply right click the SVG image, hit "Save Page as..." followed by choosing "Format: Page Source" in the resulting drop-down menu.

enter image description here

enter image description here

  • This doesn't seem to work if the logo is not accessible via code (for example embedded in a class) - when it's not just right-clicking might let the user doenload the image, or drag and dropping to desktop or looking in the developer menu's page resources – MicroMachine Mar 6 at 1:35
-3

Copy the URL then open it in Inkscape. Easy peasy!

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

  • Hi Alexandra, welcome to GDSE and thanks for your answer. Could you please give us a bit more information? How do you open a link in Inkscape? What menu options to choose? Suppose that the Asker is a beginner in the software and you're mostly good. Thanks! If you have any questions, please see the help center or ping one of us in the Graphic Design Chat once your reputation is sufficient (20). Keep contributing and enjoy the site! – Vincent May 9 '18 at 8:25
-4

Sure. Make it complicated if you like - but it's not. Open the .svg file in a new browser window. Choose print -> save as pdf -> open in illustrator or other vector apps. :)

  • 4
    You already got SVG then - why complicate it by adding a step to PDF? – Michael Schumacher Dec 10 '16 at 16:08

protected by Mᴏɴᴋᴇʏ May 16 '18 at 13:19

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.