22

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.

5
  • 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, 2015 at 10:28
  • 1
    I'm now working with this media, I just can't reach one of their designers to ask for a vector! Jun 17, 2015 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) Jun 17, 2015 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, 2015 at 11:54
  • This doesn't always create a file that a SVG editor can open. Are there validators online for SVG code? Mar 27, 2020 at 22:15

6 Answers 6

23

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

3
  • 2
    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, 2018 at 10:29
  • This worked better for me in Safari than in Chrome Mar 6, 2019 at 1:36
  • Thanks a lot work like a charm. Apr 20, 2020 at 6:17
4

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.

1
  • 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.
    – Jongware
    Jun 17, 2015 at 13:14
4

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

1
  • 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 Mar 6, 2019 at 1:35
0

Solutions that work for me (on a Mac):

1 - Drag the Logo to your desktop (any browser)

In some cases, the code of the page allows you to drag the .SVG file from the website directly onto your desktop or chosen folder. Super easy!

enter image description here

2 - Print to PDF (Safari, Firefox)

This requires a little more work and might now always work. On the Print dialog, go to PDF > Save as PDF. The preview should allow you to see if the logo will be exported or not (sometimes, it doesn't work). After export, you can open the file in the vector editing app of your choice.

3 - Drag and drop from Chrome's Inspector

This one might work in desperate cases. Inspect the logo element, and hover over its name. A little window with a thumbnail will appear with the logo inside. Click the small logo, drag it to a folder.

enter image description here

There might be other solutions like mentioned above (copy the code and convert it somehow - in the third website example I showed this didn't work because the code looks like this, or SVG Crowbar also works sometimes (and sometimes not - like when the download boxes are overlapping).

-4

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

1
  • 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, 2018 at 8:25
-5

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. :)

2
  • 7
    You already got SVG then - why complicate it by adding a step to PDF? Dec 10, 2016 at 16:08
  • Talk about making it complicated… and completely misunderstood. You can’t just “open the .svg file in a new browser window” – the whole point is that there is no .svg file, only inline SVG code. So not only does this complicate matters by unnecessarily printing to a PDF, it’s also not even an answer to the question. Nov 16, 2020 at 22:55

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