Service Studio Image/Svg Sprite generation and Sprite Component

Service Studio

Service Studio

In Service Studio I would like to feature to define a new Image or Svg  sprite.  Each sprite would have a Name attribute.

After the sprite is defined, the user would import one or more Image or Svg files into the sprite as resource.  Each resource would have an attribute of Name.  

In addition, one or more resolution will be define per sprite definition with the following attributes:

  • Name
  • Height
  • Width

Sprite Component

A new Sprite component would be need to support the rendering of a resource  contained in the sprite file.  The component would would have three properties:

  • Sprite name
  • Resource name.
  • Resolution name

Runtime Implementation

During a compile, if needed ServiceStudio, would:

  • scale image resource files to a common size
  • generation a sprite file

Note an svg sprite would not need scaling.

For each Page containing one or more Sprite components the page header would include (if needed):

  • Import/Reference to Sprite file
  • Import/Reference to the CSS styles

For each use of the the Sprite component:

  • html to render the resource
  • css to render the resource
  • js to render to resource

Note there a many guides on creating and using Sprite files for images and svgs.  Here is one from fontawsome.  Emphasis in implementation should be on fastest rendering time followed by content size.

Created on 16 Mar
Comments (2)

Changed the category to Service Studio

I think you're mixing up "css sprites" which is a very developer-unfriendly technique to avoid repeated calls to the webserver to speed up displaying images (especially small ones), the name of which is (totally erroneously) derived from "sprites" as used on 8- and 16-bit home computers and consoles, and "svg sprites", which are even more ridiculously wrongly named (after the already wrongly named "css sprites"), and have little to do with the "css sprites" (and, as far as I understand, do not avoid at all the repeated calls that "css sprites" are meant to avoid).