Skip to main content
Roopavathy
Roopavathy
Known Participant
January 21, 2017
Answered

Use of SVG

  • January 21, 2017
  • 2 replies
  • 1591 views

Hi,

I want to develop a website like this.

https://in.tradingview.com/

I just googled and found that, the background is SVG.But I am very new to SVG.

Is there any website template available with this type of SVG background.

Any plugin we can use to have interactive SVG background ?

Please guide me.

Thanks in advance.

    This topic has been closed for replies.
    Correct answer pziecina

    One final item that you should be aware of, and a very good reason why one should learn html, css and javascript first -

    svg is undergoing a number of changes and the implementation in browsers is changing. This is because svg animations for the web are now all being done using css and javascript.

    For complexed svg animations one would use javascript, and simpler animations are to be done using css, using css transform, transitions and css keyframe animations.

    I personally would recommend reading , (and possibly buying) books on the subject, as reference materiel for css and javascript, (and html 5) and the use of them with svg is no longer such a simple subject, (if it ever was).

    Also don't forget that a good svg editor is required, and even though many vector programs will convert an illustration to svg, these are not to be used. You should find a program that allows you to actually start with an svg document, otherwise trying to animate a particular element in svg becomes almost impossible.

    Initially try Adobes Illustrator, or the open source program, 'Inkscape' -

    https://inkscape.org/en/

    2 replies

    pziecina
    pziecinaCorrect answer
    Legend
    January 23, 2017

    One final item that you should be aware of, and a very good reason why one should learn html, css and javascript first -

    svg is undergoing a number of changes and the implementation in browsers is changing. This is because svg animations for the web are now all being done using css and javascript.

    For complexed svg animations one would use javascript, and simpler animations are to be done using css, using css transform, transitions and css keyframe animations.

    I personally would recommend reading , (and possibly buying) books on the subject, as reference materiel for css and javascript, (and html 5) and the use of them with svg is no longer such a simple subject, (if it ever was).

    Also don't forget that a good svg editor is required, and even though many vector programs will convert an illustration to svg, these are not to be used. You should find a program that allows you to actually start with an svg document, otherwise trying to animate a particular element in svg becomes almost impossible.

    Initially try Adobes Illustrator, or the open source program, 'Inkscape' -

    https://inkscape.org/en/

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    January 23, 2017

    Have you tried Boxy SVG Editor yet?   It's a Chrome add-on.

    Boxy SVG Editor

    Nancy O'Shea— Product User & Community Expert
    pziecina
    pziecina
    Legend
    January 23, 2017

    Thank you Nancy,

    I will give it a try, and let you know how it works out.

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    January 22, 2017

    Have a look at this course Everything You Need To Know About SVG | CSS-Tricks and then decide if you want to create an interactive SVG background at this stage of your knowledge.

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Roopavathy
    RoopavathyAuthor
    Known Participant
    January 23, 2017

    Thanks Ben...

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices