Category: SVG

All about Scalar Vector Graphics (SVG)

Categories
SVG

Invited Expert

I put in an application to be considered as an invited expert by the W3C in response to Jeff Schiller’s work to encourage participation in the SVG Interest Group. I do like SVG and am interested in promoting SVG, but the whole process of having to submit an application to be considered to be an invited expert just to participate in an interest group was uncomfortable. I’ve never been one to call myself an “expert”, and I don’t classify myself with other “invited experts” I’ve seen in other interest groups.

The W3C has to change how it does business. Consider the process just to join this group to promote SVG—something you would think the W3C would welcome with open arms:

  1. First you have to identify whether you work for an organization already in the W3C. I assume if you’re an individual who wants to participate without joining as part of your company’s effort, you’re out of luck.
  2. If you’re not part of a W3C organization, you’re asked to consider whether the company you work for might be interested in joining the W3C, before joining as an individual.
  3. If you stubbornly persist in being an individual to this point, you’re then greeted with the Policy for Approval of Invited Experts, where we’re told that normally the committee Chair and Contact would meet with us, first, before submitting the application. Then the application is reviewed, and if the “invited expert” would need to have access to W3C members-only area, another internal approval process must be conducted.
  4. At some point in time, within ten business days, my application may, or may not, be approved. If it is approved, though, anything I do associated with this effort immediately becomes property of the W3C.

In addition, I can only remain a member of good standing if I don’t miss any more than one face-to-face meeting in three, even if I have to pay my own way to Boston, where one assumes such meetings take place. Of course, if the Chair is feeling generous, I may be excused this requirement. However, I must refrain from “offending” any other member of the W3C; criteria I’m sure to have already failed, just by writing this post.

No, I’m not invited expert material. I’m just a tech who likes SVG and wants to see its popularity grow.

Categories
HTML5 RDF SVG

Son of Blob

Recovered from the Wayback Machine.

Adobe has decided to partner with Yahoo and Google, specifically, in order to enable search engine access to Flash contents. In other words, web builders that use bad web practices have been rewarded, and can continue to use Flash to completely build their sites, without regard for accessibility or an open web. The site designers do not have to worry their pretty little heads any longer, because the big boys have come to an “arrangement of mutual benefit”, and have decided that no, their shit does not stink.

I’d like to think that one reason Adobe is making this move is because it feels threatened from competition by SVG, but even a fangirl like myself has to acknowledge that much of this is probably related to recent moves into the animation and rich content field by other not-to-be named competitors. Besides, what chance does an open sourced, and openly accessible, technology have against such attractively packaged vendor lock-in? I mean, Google, Adobe: what more would we want?

We should just quit work on HTML5, right now. RDFa, too, not to mention microformats. Forget that semantic markup stuff, and the debate over ABBR. Who needs SVG, anyway? We have Flash, and Flash can be searched. The web has arrived.



Categories
SVG

Robert: Applying SVG effects to HTML

A couple of people have kindly pointed out Robert O’Callahan’s wonderful exploration Applying SVG Effects to HTML.

I’ve held off on posting about it, as I wanted to create a longer writing trying out Robert’s work. However, I didn’t want to put off sharing this effort any longer. I’ll have more on this mix of HTML and SVG at a later time. In the meantime, if you’re a fan of SVG, you’ll want to check out Robert’s work.

Categories
SVG

XHTML and template.php

Since I use inline SVG in all of my sites, I need to serve my pages up as XHTML. I couldn’t find a Drupal module or option that triggers Drupal to serve the pages up as XHTML, so I added the following code at the very top of the page.tpl.php page:

<?php
header("Vary: Accept");
if (stristr($_SERVER["HTTP_ACCEPT"], "application/xhtml+xml"))
    header("Content-Type: application/xhtml+xml; charset=utf-8");
else
    header("Content-Type: text/html; charset=utf-8");
?>

All this code does is check whether the user agent can support XHTML. If it can, the page is served up as XHTML; otherwise HTML. Using embedded PHP in page.tpl.php for the theme works as desired. However, the content type of the page no longer agrees with the content-type meta element, which is included within the $head variable.

  <head>
    <title><?php print $head_title ?></title>
    <?php print $head ?>
    <?php print $styles ?>
    <?php print $scripts ?>
    <!--[if lt IE 7]>
      <?php print phptemplate_get_ie_styles(); ?>
    <![endif]-->
  </head>

One solution would be to not print out the $head variable and just hard code all of the head entries. However, when you add a new module, such as the RDF module, which adds entries to the $head variable, you either have to hard code these in, also, or you lose functionality.

Instead, I used the template.php file, which is used to override default Drupal behavior. Specifically, I created a variant of _preprocess_page for my subtheme, used this to access $head, and alter it.

function flame_preprocess_page(&$vars) {
  $head = $vars['head'];
  $head = str_replace("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />",
              "<meta http-equiv=\"Content-Type\" content=\"application/xhtml+xml; charset=UTF-8\" />", $head);

  $head = str_replace("<link rel=\"alternate\" type=\"application/rss+xml\" title=\"Burningbird's RealTech RSS\" href=\"http://realtech.burningbird.net/rss.xml\" />\n","",$head);

  $vars['head'] = $head;
}

I am still getting my head around customization in Drupal, and will have a follow-up posting later, after I’ve had more time to work through issues. In the meantime, from my understanding, the _preprocess_page passes in an array of system variables, each of which can be accessed and altered, as I’ve done in the code example. The subtheme naming is essential, otherwise I would overwrite the use of the function within the Garland theme.

There is another theme specific function for overriding variables called _phptemplate_variables, but I gather that was Drupal 5 and the approach I used is Drupal 6.x and forward.

Now, the head entries are as I want them, and modules such as RDF can add their entries without me impacting on their work. More importantly, with the addition of the XHTML support, I can add inline SVG and the SVG will display correctly for those browsers that support inline SVG.

(Note this image is now included using the IMG element. I’m now using WordPress, and WordPress does not allow inline SVG.)

hello world in svg

Categories
SVG

The SVG Radial Gradient

Chapter 7 in the book provides an introduction into some of the many useful elements in SVG. Included is a discussion of the two gradients, linearGradient and radialGradient. They can’t be used to create a visual element by themselves, but are, instead, used to fill any shape that takes the fill attribute. For instance, one of the book examples defines four radialGradients, which are then used to fill four different circles. The last two circles in the example demonstrate how the radialGradient can be used to provide spherical highlights, especially when using a monochromatic color scheme, as shown in the fourth circle.

The following is the radialGradient definition used to fill the fourth circle in the example:


<radialGradient id="gradient4" cx="20%" cy="20%" r="100%" fx="30%" fy="30%">
      <stop stop-color="white" offset="0%" />
      <stop stop-color="#666" offset="50%" />
      <stop stop-color="black" offset="100%" />
</radialGradient>

The stop elements are used to define the colors for the gradient, in this case white from 0 to 50%, and then gray from 50% to 100% black. SVG user agents, like the browser you’re using (which, hopefully, supports SVG), derive the radialGradient from these stops in combination with the other radialGradient attributes. From the example given, these attributes are:

 

  • cx and cy define the size of the radialGradient’s outer circle and are equal to the 100% stop value
  • r is the length (size) of the gradient circle
  • fx and fy are the focal point for the gradient, equal to the 0% stop value

 

In the example, the focal point of the radial gradient is set to 30% along both x and y axis, which places it in the upper-left. If both were set to 50%, then the focal point would be in the exact center of the gradient.

An attribute that was not given explicitly in the previous examples was the spreadMethod, which provides instruction in how to fill the shape when the radialGradient is smaller than the containing element. The possible values are: pad, spread, and repeat, with pad being the default.

In the >third example, three circles are filled with three different radialGradients. The cx and cy values are 30%, the fx and fy values are 20%, the length is 50%. All that differs between the circles is spreadMethod, which is, from left circle to right: reflect, repeat, and pad. The reflect value causes the gradient to repeat, from the outside in; the repeat value repeats the pattern literally, which can lead to rather abrupt transitions; the last option, pad, fills in the remaining area of the circle with the color given for the 100% stop.

When creating radialGradients, you’re not restricted to three stops or different saturations of the same color. The following SVG example has a radialGradient that uses 6 different stops, with six different colors, creating a nice neon light effect. The radialGradient is then used to fill a rectangle, rather than a circle.

Four issues with the radialGradient, all specific to browsers. I’ve found that the reflect spreadMethod can cause minor havoc with the Firefox 3.x browser in the Mac, pushing down the size of the area, without necessarily impacting on the visual rendering. This makes it a bit tricky to define a view port, or include the SVG using the object element. Opera 9.5b has some rendering delays when using gradients, and Safari/Webkit doesn’t respect the object’s transparent background. You’ll also need to use a SVG plug-in with Internet Explorer. I’ll have more on the issues of browser SVG support in a follow up writing, which I’ll link here when finished.

To see radialGradient in action, check out the following from Open Clip Art:

Dave Pena’s Sakura, which uses opacity and the radialGradient to create the soft hues and gradual coloration. This image was pulled from the downloadable archives.

A wonderful workstation by Kobo. Notice the hard “light streak” across the monitors? I discuss this use of a light streak to provide an impression of a hard, shiny plastic surface in the book.

A tasty cake from Jean Victor Balin.

Zipped files of all the book examples can be downloaded from the O’Reilly book support site.