• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 41
  • Last Modified:

How do I convert HTML source code for a svg into a svg file -- that I can pull into Illustrator to create a png

Hello
I'm recreating some svg's and all I have to work with is some source code.  Specifically the following code
    <div id="GlobalIconSymbols" style="display: none;"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="feature-list-checkmark"><svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg"><path d="M7 16c-.265 0-.52-.105-.707-.293l-6-6c-.39-.39-.39-1.023 0-1.414.39-.39 1.023-.39 1.414 0l5.236 5.236L18.24.35c.36-.42.992-.468 1.41-.11.42.36.47.99.11 1.41l-12 14c-.182.212-.444.338-.722.35H7" fill="#47C1BF" fill-rule="evenodd"/></svg>
</symbol><symbol id="star"><svg viewBox="0 0 71 72" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero"><path d="M35.507 3C17.56 3 2.96 17.804 2.96 36c0 18.196 14.6 33 32.547 33 17.946 0 32.548-14.804 32.548-33 0-18.196-14.602-33-32.548-33m0 69C15.927 72 0 55.85 0 36S15.927 0 35.507 0c19.578 0 35.507 16.15 35.507 36s-15.93 36-35.507 36"/><path d="M35.507 45.892c.237 0 .473.058.688.172l6.49 3.46-1.24-7.327c-.082-.488.08-.984.427-1.328l5.25-5.19-7.257-1.07c-.48-.07-.898-.378-1.114-.82L35.51 27.12l-3.246 6.667c-.215.442-.63.75-1.112.82l-7.256 1.07 5.25 5.19c.35.342.508.84.427 1.326l-1.24 7.327 6.49-3.46c.215-.114.452-.172.69-.172m9.14 7.875c-.234 0-.47-.057-.687-.172l-8.455-4.508-8.454 4.508c-.5.265-1.102.22-1.56-.114-.455-.337-.683-.905-.588-1.47l1.616-9.545-6.84-6.76c-.404-.398-.55-.995-.376-1.538.176-.543.64-.938 1.195-1.02l9.453-1.393 4.228-8.685c.25-.513.764-.837 1.328-.837.563 0 1.077.324 1.326.836l4.228 8.684 9.454 1.393c.556.082 1.02.477 1.194 1.02.176.543.03 1.14-.373 1.538l-6.84 6.76 1.613 9.546c.097.565-.133 1.133-.588 1.47-.257.19-.564.285-.87.285m2-25.904c-.25.003-.504-.062-.736-.2-.71-.412-.95-1.33-.542-2.05l3.52-6.18c.41-.717 1.314-.964 2.02-.55.707.417.95 1.333.542 2.05l-3.52 6.182c-.274.483-.772.752-1.283.752M24.36 27.86c-.51.003-1.008-.266-1.282-.747l-3.52-6.182c-.41-.717-.167-1.633.54-2.05.707-.414 1.612-.167 2.022.55l3.52 6.182c.41.72.166 1.637-.54 2.05-.234.137-.488.2-.74.2m11.147-9.667c-.816 0-1.48-.672-1.48-1.5v-5.5c0-.828.664-1.5 1.48-1.5.817 0 1.48.672 1.48 1.5v5.5c0 .828-.663 1.5-1.48 1.5"/></g></svg>

</symbol></svg></div>

Open in new window

[/code]


The above source code is for a "Star".  How do I grab that code and create a file with an svg extension.  Perhaps there is an online svg converter that will do that? Or maybe I can put it into Illustrator and turn it into a svg -- which I can then convert into a png?

Any help appreciated.

Thanks
Rowby
0
Rowby Goren
Asked:
Rowby Goren
  • 3
  • 3
1 Solution
 
Shaun VermaakTechnical Specialist/DeveloperCommented:
Do you care about how? Can you post a link to working page?
0
 
Rowby GorenAuthor Commented:
Hi Shaun,

Thanks for helping.  Here's a link to the page. Link to page with svgs

If you scroll down the page you'll see a group svg's.  The group starts with the words "Delight customers"   There's a star svg and 5 more in that group.

Thanks!

Rowby
0
 
Shaun VermaakTechnical Specialist/DeveloperCommented:
star.png
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
Rowby GorenAuthor Commented:
Hi Shaun,

How were you able to create the png from the svg    So I can do the other svgs on that page.  I also want to make them a specific size, so I assume somehow the "source code" gets into a program like Adobe Illustrator for the conversion from the svg to the png.

Thanks!

Rowby
0
 
Shaun VermaakTechnical Specialist/DeveloperCommented:
I made a screenprint and converted into a vector with Vector Magic, Illustrator process similar

You can also get icon packs from here
glyphsearch.com
0
 
Rowby GorenAuthor Commented:
Thanks!  Sorry for the delay in awarding your well-deserved points!

Rowby
1
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now