“Don’t be afraid, don’t settle, work hard in the future” — Hello! I am little sesame 😄

～～～～ contains images from:A guest post- New media illustration – Public account cover image scene ～～～～

In the early days of the Web, there was an explosion of different HTML formats and extensions. From this explosion, it is useful to highlight the Web’s vector graphics format. So Chris Lilley wrote a general requirements document for vector graphics in 1996. Things were looking up by 1998, when the Web vector graphics field submitted six competing documents to the W3C:

  • Web Schematics, CCLRCWeb Schematics
  • PGML, from Adobe, IBM, Netscape and Sun
  • VML, courtesy of Autodesk, Hewlett-Packard, Macromedia and Microsoft
  • Hyper Graphics Markup Language, courtesy of Orange, PCSL and PRPSuper Graphics Markup Language
  • WebCGM, from Boeing, CCLRC, Inso, JISC and Xerox
  • DrawML, from Excosoft

Different submitters have different ideas about how to deal with their specifications. Adobe and others say PGML is just a proposal and that they are happy to let the W3C modify it in any way. Microsoft says that the VML is a document of an implemented and published product, and that the W3C has not been authorized to make any changes.

Eventually the SVG working group matched the various submissions for general requirements and decided not to “develop” any of the submissions, but instead to develop a new language based on (but not really based on) any of the submissions. Clearly, there is general agreement on the required types of vector graphics capabilities (Bessel curves, masks, compositions), and the SVG working group is focused on this generality rather than syntactic conflicts.

The birth of SVG

The influence of the VML

  • Vector Markup Language (VML) originated in Microsoft’s Office group as a PowerPoint add-on and is provided as an ActiveX control in Internet Explorer. VML’s element types and compression path syntax affect SVG.

  • The SVG working group did some tests on simple XML files with uncompressed and gzip compression and found that even with compression, the compact path syntax makes a big difference in file size, so the microsyntax approach was adopted, although not exactly the same.

The influence of PGML

  • Precise Graphics Markup Language (PGML) is a 2D scalable graphics language that uses the same image model as Adobe’s PostScript and Portable Document Format (PDF) formats.

  • It has the greatest impact on SVG design in terms of coordinates and transformations, color space, and to some extent text and fonts.

Other effects

  • Lessons learned from CSS and internationalization are powerful incentives to treat text as a child of a ‘text’ element, rather than meaningless numbers as element content, hiding them in attributes.

  • The “tref” element is influenced by the concept of link inclusion. The “A” element is clearly influenced by HTML, despite its ability to have different content models and nested links; It is also influenced by the emerging XLink specification.

Driver and deployment

Early influences in the development of SVG were Chris Lilley from W3C and Jon Ferraiolo from Adobe.

Adobe makes the popular SVG Viewer and has added support in some of its products, such as Illustrator. In recent years, SVG has been implemented natively in several browsers, including Opera, Firefox, and WebKit (Safari and Google Chrome).

In 2009, Microsoft announced that it would also provide native support for SVG in Internet Explorer 9, completing the major browsers that support SVG and bringing SVG to the full.

Chris Lilley, head of corporate Interactive graphics development at W3C, says: “Before SVG, Web designers had to define the width and height of their images in pixels and store them only in bitmaps. SVG will allow Web designers to save their images in vector form and deliver them at high quality and speed across the Web.”

Second, version iteration

Version 1.x evolution

  • SVG 1.0 became a W3C recommendation on 4 September 2001.

  • SVG 1.1 became a W3C recommendation on January 14, 2003.

    • The SVG 1.1 specification is modularized to allow subsets to be defined as configuration files. Other than that, there is little difference between SVG 1.1 and SVG 1.0.

    • SVG Tiny and SVG Basic (Mobile SVG configuration files) became W3C recommendations on January 14, 2003. They are described as SVG 1.1 configuration files.

  • SVG Tiny 1.2 became a W3C recommendation on December 22, 2008. Originally drafted as a synopsis for the planned SVG Full 1.2 (SVG 2 will no longer be supported), but has since been refactored into a standalone specification. Usually poor support.

  • SVG 1.1 version 2 (with all errata and instructions) was released on 16 August 2011, but does not differentiate from the new features of original SVG 1.1.

  • SVG Tiny 1.2 Portable/Secure is a more Secure subset of the SVG Tiny 1.2 configuration file introduced as the IETF draft standard on 29 July 2020. Also called SVG Tiny P/S. SVG Tiny 1.2 Portable/Secure is a requirement of the BIMI draft standard.

Version 2.x evolution

  • SVG 2.0 deprecates some of the features of SVG 1.1 and incorporates new features of HTML5 and Web open font formats

    • For example, SVG 2.0 removes several font elements, such as glyph and altGlyph (replaced by the WOFF font format).

    • XML: Space is not recommended to use this property and CSS is recommended.

    • HTML5 features have been added, such as translate and data-* attributes.

    • Text processing in SVG Tiny 1.2 is marked for inclusion, but not formalized in text. Other 1.2 features are introduced, but SVG 2.0 is not a superset of SVG Tiny 1.2.

The draft reached the candidate recommendation stage on September 15, 2016. The latest draft was released on 26 May 2020.

The 14 functional areas defined by the SVG 1.1 specification

  • 1, Path
  • 2, Basic shapes
  • 3. Text
  • 4. Painting
  • 5. Color
  • Gradients and Patterns
  • 7. Clipping, masking and compositing (shear, masking and synthesis)
  • 8. Filter Effects
  • 9. Interactivity
  • 10. Linking
  • 11. Scripting (Scripts)
  • 12. Animation
  • Fonts (Fonts)
  • 14. Metadata

～～～～ Image watermarking tool:A guest post- Image editing scenario ～～～～

reference

  • [1] Secret Origin of SVG
  • [2] Scalable Vector Graphics
  • [3] Scalable Vector Graphics (SVG) 1.1 (Second Edition)