0

I have this svg

<svg viewBox="0 0 462 40" height="40" width="462" id="lol-text-1" class="lol-text__svg">
<desc>Created with Snap</desc>
<defs>
    <linearGradient x1="0" y1="0.3" x2="0" y2="0.8" id="Sikjr46ql1nr">
        <stop offset="0%" stop-color="#cbac62"/>
        <stop offset="100%" stop-color="#66481f"/>
    </linearGradient>
    <mask id="Sikjr46ql1nz">
        <text x="0" y="35" class="lol-text__mask" style="" fill="#ffffff">Pentakill</text>
    </mask>
</defs>
<g style="" mask="url('#Sikjr46ql1nz')">
    <text x="0" y="35" class="lol-text__shadow" style="" fill="#ad986a">Pentakill</text>
    <text x="1" y="36" class="lol-text__text" style="" fill="url('#Sikjr46ql1nr')">Pentakill</text>
</g>

As it says in the svg code, it was created with snap. Here is the html tag used to generate the svg:

<span class="lol-text" style="display: none;">Pentakill</span>

I asume that the style="display: none;" was inserted after the svg was generated.

What i need is an example on how do i generate the same svg from an html tag using snap.svg or svg.js

Thank you!

Bogdan Galan
  • 65
  • 1
  • 8

2 Answers2

1

Snap.svg will help you generate graphics, but it can also work with existing SVG. This means that your SVG content does not necessarily have to be created with Snap.svg, you're also free to manipulate graphics created with tools like Adobe Illustrator, Inkscape, or Sketch.

Here are some examples, which you can also find on the Demo section of their website.

 <html>
 <head>
    <meta charset="utf-8" />
    <title>Sample snapsvg</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.2.0/snap.svg-min.js"></script>
 </head>
 <body>
 <script type="text/javascript">
   window.onload = function()
   {
     var snap = Snap(912,912);
     var headline = snap.paper.text(56,100, ['The Three Layers','of','Every Web Page']).attr({fill: '#FBAF3F', fontFamily: 'Impact'}); 
   }
  </body>
  </html>

here you can see the output

UPDATE

if you want to know more about it with example.

http://www.sitepoint.com/create-infographic-using-snap-svg/

Renjith V R
  • 2,981
  • 2
  • 22
  • 32
  • if you look here [link](http://promo.na.leagueoflegends.com/en/music-of-league/) every `h3` tag has a svg in that i guess is generated automatically somehow and every svg has an unique random id that i`m sure was not inserted manually. I want to do the exact same thing on my site too without having to manually edit every id to be unique. – Bogdan Galan Feb 12 '16 at 19:45
  • sorry,i don't understand you. – Renjith V R Feb 15 '16 at 11:57
  • If you search for "snap" in this js file [link](http://promo.na.leagueoflegends.com/assets/music-of-league/dist/production.min.js) you will find lots of snap words and even "Created with Snap" and if you search for "lol-text" you will find at the bottom of the js file the part of the code used to generate the svg. I don't know javascript, I only know how to modify some easy stuff from a js file and the file from the link being minified I realy don't understand nothing. – Bogdan Galan Feb 15 '16 at 11:58
  • this will give some basic ideas then. – Renjith V R Feb 15 '16 at 12:03
  • I use joomla as a cms to post articles and to copy/paste the svg code every time I use a h2 or h3 tag is not helping. What I want to know is how do I achieve the exact same svg that i posted above. And I'm sure that the one who made this page [link](http://promo.na.leagueoflegends.com/en/music-of-league/) didn't insert the svg there manually.How do i achieve that? – Bogdan Galan Feb 15 '16 at 12:29
0

I have searched a lot to find what I wanted and I found exactly what I was looking for.

Here is the code and an example: text gradient generated with snap.svg

Bogdan Galan
  • 65
  • 1
  • 8