Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • World
  • Users
  • Groups
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Brand Logo

agnos.is Forums

  1. Home
  2. Linux
  3. today i learned: svg files are literally just html code

today i learned: svg files are literally just html code

Scheduled Pinned Locked Moved Linux
linux
58 Posts 37 Posters 0 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • adrianhooves@lemmy.todayA This user is from outside of this forum
    adrianhooves@lemmy.todayA This user is from outside of this forum
    [email protected]
    wrote on last edited by
    #1

    what the heck!! that is so wild, mind blowing, i know the main difference between raster graphics and vector graphics was the quality but not more, i had no idea svg files actually used html code and pretty much could be modified using only text and amazing code woa!!! this opens up the possibility for so many things on linux i think, for example, on a linux distro, we could modify the desktop environment and make it waaaaay lighter by getting rid of jpg or png icons and just using pure svg on it. svg can be given a lot of attributes like movement, mouse hovering, change color, change anything. and most svg files are still under a megabyte. wow.. please let me know other fun facts about svg or eps files. i really like doing graphic design on linux and inkscape.

    A M daggermoon@lemmy.worldD U jraccoon@discuss.tchncs.deJ 16 Replies Last reply
    1
    0
    • System shared this topic on
    • adrianhooves@lemmy.todayA [email protected]

      what the heck!! that is so wild, mind blowing, i know the main difference between raster graphics and vector graphics was the quality but not more, i had no idea svg files actually used html code and pretty much could be modified using only text and amazing code woa!!! this opens up the possibility for so many things on linux i think, for example, on a linux distro, we could modify the desktop environment and make it waaaaay lighter by getting rid of jpg or png icons and just using pure svg on it. svg can be given a lot of attributes like movement, mouse hovering, change color, change anything. and most svg files are still under a megabyte. wow.. please let me know other fun facts about svg or eps files. i really like doing graphic design on linux and inkscape.

      A This user is from outside of this forum
      A This user is from outside of this forum
      [email protected]
      wrote on last edited by
      #2

      More precisely, both are flavors of XML.

      N satyrsack@feddit.orgS A 3 Replies Last reply
      0
      • A [email protected]

        More precisely, both are flavors of XML.

        N This user is from outside of this forum
        N This user is from outside of this forum
        [email protected]
        wrote on last edited by
        #3

        ...which is derived from SGML.

        1 Reply Last reply
        0
        • A [email protected]

          More precisely, both are flavors of XML.

          satyrsack@feddit.orgS This user is from outside of this forum
          satyrsack@feddit.orgS This user is from outside of this forum
          [email protected]
          wrote on last edited by
          #4

          HTML predates XML by several years.

          A 1 Reply Last reply
          0
          • A [email protected]

            More precisely, both are flavors of XML.

            A This user is from outside of this forum
            A This user is from outside of this forum
            [email protected]
            wrote on last edited by
            #5

            technically HTML is not XML.. XHTML is, but HTML can be invalid XML.

            A G 2 Replies Last reply
            0
            • satyrsack@feddit.orgS [email protected]

              HTML predates XML by several years.

              A This user is from outside of this forum
              A This user is from outside of this forum
              [email protected]
              wrote on last edited by
              #6

              Age doesn't matter. XML is a super-set of XHTML's spec.

              That is - all XHTML is valid XML but not all XML is valid XHTML.

              Note I'm saying XHTML not HTML since the later need not be valid XML.

              chtk@feddit.nlC 1 Reply Last reply
              0
              • A [email protected]

                technically HTML is not XML.. XHTML is, but HTML can be invalid XML.

                A This user is from outside of this forum
                A This user is from outside of this forum
                [email protected]
                wrote on last edited by
                #7

                Ok—to the extent that SVG is HTML, the variant of HTML that it is is a flavor of XML.

                1 Reply Last reply
                0
                • adrianhooves@lemmy.todayA [email protected]

                  what the heck!! that is so wild, mind blowing, i know the main difference between raster graphics and vector graphics was the quality but not more, i had no idea svg files actually used html code and pretty much could be modified using only text and amazing code woa!!! this opens up the possibility for so many things on linux i think, for example, on a linux distro, we could modify the desktop environment and make it waaaaay lighter by getting rid of jpg or png icons and just using pure svg on it. svg can be given a lot of attributes like movement, mouse hovering, change color, change anything. and most svg files are still under a megabyte. wow.. please let me know other fun facts about svg or eps files. i really like doing graphic design on linux and inkscape.

                  M This user is from outside of this forum
                  M This user is from outside of this forum
                  [email protected]
                  wrote on last edited by
                  #8

                  Another interesting part is that HTML5 supports embedding SVG. That
                  is, you can put SVG code directly in your HTML5 document and it’s
                  going to render correctly. You can also style it through your
                  website’s CSS file and manipulate the elements via JavaScript.

                  Though as others pointed out, it’s technically not HTML but XML.

                  adrianhooves@lemmy.todayA 1 Reply Last reply
                  0
                  • M [email protected]

                    Another interesting part is that HTML5 supports embedding SVG. That
                    is, you can put SVG code directly in your HTML5 document and it’s
                    going to render correctly. You can also style it through your
                    website’s CSS file and manipulate the elements via JavaScript.

                    Though as others pointed out, it’s technically not HTML but XML.

                    adrianhooves@lemmy.todayA This user is from outside of this forum
                    adrianhooves@lemmy.todayA This user is from outside of this forum
                    [email protected]
                    wrote on last edited by
                    #9

                    woww that is crazy, thanks, does that mean that instead of using exported pngs, i can just use the svg code on html and it'll be a much lighter file??

                    M P ? 3 Replies Last reply
                    0
                    • adrianhooves@lemmy.todayA [email protected]

                      woww that is crazy, thanks, does that mean that instead of using exported pngs, i can just use the svg code on html and it'll be a much lighter file??

                      M This user is from outside of this forum
                      M This user is from outside of this forum
                      [email protected]
                      wrote on last edited by
                      #10

                      If you have an SVG image you can either embed it directly on the website, or link it using img tag. There’s no need to export it to PNG.

                      1 Reply Last reply
                      0
                      • adrianhooves@lemmy.todayA [email protected]

                        what the heck!! that is so wild, mind blowing, i know the main difference between raster graphics and vector graphics was the quality but not more, i had no idea svg files actually used html code and pretty much could be modified using only text and amazing code woa!!! this opens up the possibility for so many things on linux i think, for example, on a linux distro, we could modify the desktop environment and make it waaaaay lighter by getting rid of jpg or png icons and just using pure svg on it. svg can be given a lot of attributes like movement, mouse hovering, change color, change anything. and most svg files are still under a megabyte. wow.. please let me know other fun facts about svg or eps files. i really like doing graphic design on linux and inkscape.

                        daggermoon@lemmy.worldD This user is from outside of this forum
                        daggermoon@lemmy.worldD This user is from outside of this forum
                        [email protected]
                        wrote on last edited by
                        #11

                        Damn, I actually did not know that. I thought it was just an image file.

                        executivechimp@discuss.tchncs.deE 1 Reply Last reply
                        0
                        • adrianhooves@lemmy.todayA [email protected]

                          woww that is crazy, thanks, does that mean that instead of using exported pngs, i can just use the svg code on html and it'll be a much lighter file??

                          P This user is from outside of this forum
                          P This user is from outside of this forum
                          [email protected]
                          wrote on last edited by
                          #12

                          litghter, as in smaller, yess. but keep in mind, that vector graphics need to be rendered, wich depending on circumstance and graphic might become inefficient.

                          i never crunched the numbers, but basically youre outsourcing the generation of a rastergraphic to those who open up your website.

                          F 1 Reply Last reply
                          0
                          • A [email protected]

                            Age doesn't matter. XML is a super-set of XHTML's spec.

                            That is - all XHTML is valid XML but not all XML is valid XHTML.

                            Note I'm saying XHTML not HTML since the later need not be valid XML.

                            chtk@feddit.nlC This user is from outside of this forum
                            chtk@feddit.nlC This user is from outside of this forum
                            [email protected]
                            wrote on last edited by
                            #13

                            XML is a super-set of XHTML's spec.

                            That's a weird way of saying XHTML is an application of XML.

                            A 1 Reply Last reply
                            0
                            • daggermoon@lemmy.worldD [email protected]

                              Damn, I actually did not know that. I thought it was just an image file.

                              executivechimp@discuss.tchncs.deE This user is from outside of this forum
                              executivechimp@discuss.tchncs.deE This user is from outside of this forum
                              [email protected]
                              wrote on last edited by
                              #14

                              It's both of those things

                              N 1 Reply Last reply
                              0
                              • adrianhooves@lemmy.todayA [email protected]

                                what the heck!! that is so wild, mind blowing, i know the main difference between raster graphics and vector graphics was the quality but not more, i had no idea svg files actually used html code and pretty much could be modified using only text and amazing code woa!!! this opens up the possibility for so many things on linux i think, for example, on a linux distro, we could modify the desktop environment and make it waaaaay lighter by getting rid of jpg or png icons and just using pure svg on it. svg can be given a lot of attributes like movement, mouse hovering, change color, change anything. and most svg files are still under a megabyte. wow.. please let me know other fun facts about svg or eps files. i really like doing graphic design on linux and inkscape.

                                U This user is from outside of this forum
                                U This user is from outside of this forum
                                [email protected]
                                wrote on last edited by
                                #15

                                main difference between raster graphics and vector graphics was the quality

                                It's not. The primitives, the most basic constitutive building blocks, are different, for raster it's the pixel (a mix of colors, e.g. red/green/blue) whereas for vector it's the ... vector (a relative position elements, e.g. line, circle, rectangle or text start with).

                                This is a fundamental distinction on how you interact with the content. For raster you basically paint over pixels, changing the values of pixels, whereas for vector you change values of elements and add/remove elements. Both can be lossless though (vector always is) as for raster can have no compression or lossless compression. That being said raster does have a grid size (i.e. how many pixels are stored, e.g. 800x600) whereas vector does not, letting you zoom infinitely and see no aliasing on straight lines.

                                Anyway yes it's fascinating. In fact you can even modify SVG straight from the browser, no image editor or text editor needed, thanks to your browser inspector (easy to change the color of a rectangle for example) or even the console itself then via JavaScript and contentDocument you can change a lot more programmatically (e.g. change the color of all rectangles).

                                It's a lot of fun to tinker with!

                                S 1 Reply Last reply
                                0
                                • adrianhooves@lemmy.todayA [email protected]

                                  what the heck!! that is so wild, mind blowing, i know the main difference between raster graphics and vector graphics was the quality but not more, i had no idea svg files actually used html code and pretty much could be modified using only text and amazing code woa!!! this opens up the possibility for so many things on linux i think, for example, on a linux distro, we could modify the desktop environment and make it waaaaay lighter by getting rid of jpg or png icons and just using pure svg on it. svg can be given a lot of attributes like movement, mouse hovering, change color, change anything. and most svg files are still under a megabyte. wow.. please let me know other fun facts about svg or eps files. i really like doing graphic design on linux and inkscape.

                                  jraccoon@discuss.tchncs.deJ This user is from outside of this forum
                                  jraccoon@discuss.tchncs.deJ This user is from outside of this forum
                                  [email protected]
                                  wrote on last edited by
                                  #16

                                  They can include runnable JavaScript too, which can cause vulnerabilities in certain contexts. One example from work some years back: We had a web app where users could upload files, and certain users could view files uploaded by others. They had the option to download the file or, if it was a file type that the browser could display (like an image or a PDF), the site would display it directly on the page.

                                  To prevent any XSS (scripts from user-provided files), we served all files with the CSP sandbox header, which prevents any scripts from running. However, at the time, that header broke some features of the video player on certain browsers (I think in Safari, at least), so we had to serve some file types without the header. Mistakenly, we also included image files in the exclusion, as everyone through image files couldn't contain scripts. But the MIME type for SVG files is image/svg+xml... It was very embarrassing to have such a simple XSS vuln flagged in a security audit.

                                  1 Reply Last reply
                                  0
                                  • adrianhooves@lemmy.todayA [email protected]

                                    what the heck!! that is so wild, mind blowing, i know the main difference between raster graphics and vector graphics was the quality but not more, i had no idea svg files actually used html code and pretty much could be modified using only text and amazing code woa!!! this opens up the possibility for so many things on linux i think, for example, on a linux distro, we could modify the desktop environment and make it waaaaay lighter by getting rid of jpg or png icons and just using pure svg on it. svg can be given a lot of attributes like movement, mouse hovering, change color, change anything. and most svg files are still under a megabyte. wow.. please let me know other fun facts about svg or eps files. i really like doing graphic design on linux and inkscape.

                                    a_norny_mousse@feddit.orgA This user is from outside of this forum
                                    a_norny_mousse@feddit.orgA This user is from outside of this forum
                                    [email protected]
                                    wrote on last edited by
                                    #17

                                    we could modify the desktop environment and make it waaaaay lighter by getting rid of jpg or png icons and just using pure svg on it

                                    That's already happening.

                                    You can also change the main color of many SVGs (icons or even desktop backgrounds) with one simple edit, one command, one click.

                                    In web sites, you can assign CSS classes to SVG graphics and thus e.g. change their color according to a theme.

                                    That's my extent of fiddling with it.

                                    IIRC they also use fonts the same way CSS/HTML does.

                                    BTW, there are situations where an SVG is significantly larger than a corresponding raster image. It depends on the content.

                                    1 Reply Last reply
                                    0
                                    • adrianhooves@lemmy.todayA [email protected]

                                      what the heck!! that is so wild, mind blowing, i know the main difference between raster graphics and vector graphics was the quality but not more, i had no idea svg files actually used html code and pretty much could be modified using only text and amazing code woa!!! this opens up the possibility for so many things on linux i think, for example, on a linux distro, we could modify the desktop environment and make it waaaaay lighter by getting rid of jpg or png icons and just using pure svg on it. svg can be given a lot of attributes like movement, mouse hovering, change color, change anything. and most svg files are still under a megabyte. wow.. please let me know other fun facts about svg or eps files. i really like doing graphic design on linux and inkscape.

                                      W This user is from outside of this forum
                                      W This user is from outside of this forum
                                      [email protected]
                                      wrote on last edited by
                                      #18

                                      Postscript is also literally just a text based programming language for drawing stuff. You can create loops and recursions and all kinds of crazy transformations with a few lines of code.

                                      1 Reply Last reply
                                      0
                                      • U [email protected]

                                        main difference between raster graphics and vector graphics was the quality

                                        It's not. The primitives, the most basic constitutive building blocks, are different, for raster it's the pixel (a mix of colors, e.g. red/green/blue) whereas for vector it's the ... vector (a relative position elements, e.g. line, circle, rectangle or text start with).

                                        This is a fundamental distinction on how you interact with the content. For raster you basically paint over pixels, changing the values of pixels, whereas for vector you change values of elements and add/remove elements. Both can be lossless though (vector always is) as for raster can have no compression or lossless compression. That being said raster does have a grid size (i.e. how many pixels are stored, e.g. 800x600) whereas vector does not, letting you zoom infinitely and see no aliasing on straight lines.

                                        Anyway yes it's fascinating. In fact you can even modify SVG straight from the browser, no image editor or text editor needed, thanks to your browser inspector (easy to change the color of a rectangle for example) or even the console itself then via JavaScript and contentDocument you can change a lot more programmatically (e.g. change the color of all rectangles).

                                        It's a lot of fun to tinker with!

                                        S This user is from outside of this forum
                                        S This user is from outside of this forum
                                        [email protected]
                                        wrote on last edited by
                                        #19

                                        I'm not sure that lossy compression on vectors is strictly impossible.

                                        You can do things like store less colour information and simplify splines so that curves are less complex.

                                        U 1 Reply Last reply
                                        0
                                        • adrianhooves@lemmy.todayA [email protected]

                                          woww that is crazy, thanks, does that mean that instead of using exported pngs, i can just use the svg code on html and it'll be a much lighter file??

                                          ? Offline
                                          ? Offline
                                          Guest
                                          wrote on last edited by
                                          #20

                                          One should always optimize assets for the web, this includes svg as well.

                                          For critical paths I use https://optimize.svgomg.net/ a svg file optimizer. Svgs that are coming directly from illustrator or sketch are getting better these days but this little tool is invaluable regardless.

                                          I think you can run this local too

                                          1 Reply Last reply
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          • Login

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Categories
                                          • Recent
                                          • Tags
                                          • Popular
                                          • World
                                          • Users
                                          • Groups