Markdownhttps://en.wikipedia.org/wiki/Markdown is my favorite way to write. It is lightweight, requiring a few characters to convey the meaning of the text, it's supported in both many places, including Github and Wordpress via Jetpack so I don't need to change the way I write to publish in different places and it only needs a text editor to create for me, so does HTML but that's another story. In this article, we'll look at different ways to take Markdown input and convert it to HTML for web view. Markdown to HTML in a build process This process is part of the build...
This series has barely begun to scratch the surface of what you can do with SVG. As much SVG as we've covered, We've barely scratched the surface. There are things like the GSAP library that I deliberately did not cover because I wrote about ithttps://publishing-project.rivendellweb.net/looking-at-animations-again-gsap/ before and because I don't want to push yet another third party library into my codebase. The list below shows links to tutorials and examples of things that I've either used as inspiration or would like to play with at a later time. If you have comments, criticisms or ideas for further projects, feel free...
Perhaps the most interesting and complex topic in SVG, for me, is animations. I have a basic understanding on how to create keyframe animations for CSS content and a very basic understanding of how to use GSAPhttps://greensock.com/ to animate HTML elements. I want to explore how to create smaller targeted animations using both CSS and SVG specific animations techniques. SMIL and the animate element SVG comes with its own animation tools in the form of the animatehttps://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate element and SMIL. The most basic animation element is animate. It takes the following attributes: - attributeName: The name of the attribute we...
SVG filters allow for non-destructive image manipulation. They are a superset of the filters available directly in CSShttps://developer.mozilla.org/en-US/docs/Web/CSS/filter The basic container for the filters is the filter element. To use them you add the filter attribute to the image element containing the image you want to filter. A barebones svg for filtering an image looks like this: svg In the following sections, we'll talk about filter components and other things we need to understand before making them work. Filter Primitives In SVG filters, each filter element contains one or more filter primitives as its children. Each primitive performs a graphical...
In this post, we'll look at basic text and elements that will make interacting with the text easier. We'll also look at how to use Web Fonts with SVG. This is not a replacement for HTML, but an alternative for doing things that are not possible, or not easily possible with HTML and CSS alone. Text The text element allows you to write text as part of your SVG content. It interacts well with CSS, either written as a style inside the SVG element or in an external stylesheet. The example below uses an internal stylesheet to define three classes...
One of the fun things to explore is how we can mask and clip SVG elements and how we can do "text on a path" effects. As we explore these new elements we'll visit additional elements that make part of the mask and path functionality and how CSS interacts with SVG TL, DR: It doesn't use the same elements. Masks mask Defines an alpha mask for compositinghttps://en.wikipedia.org/wiki/Digitalcompositing the current object into the background. It will 'bleed' the background into the foreground element The pattern element defines a graphics object which you can tile repeat at x and y coordinate intervals...
Since SVG is a drawing format, it makes sense to cover drawing commands first. The container Wraps and defines the entire graphic. is to a scalable vector graphic what the element is to a web page. The example below is the minimum SVG example: svg I've chosen to use CSS for the height and width of the SVG images and to explicitly list the default namespace for SVG along with the namespace for XLink, which we'll use to create links inside the SVG element. Drawing Primitives Now that we've refreshed our minds about the SVG element and ViewBox attribute let's...
SVG is a powerful vector graphics format that works particularly well for icons and other line artwork in web pages. This is my attempt at documenting what I understand of SVG and its component elements and children. It is important for me to know how SVG works, even if there are tools that will generate the SVG for me. The W3C began development of SVG in 1999 and released as a W3C specification in 2001. It is an XML-based vector image format for two-dimensional graphics and supports interactivity and animation. SVG images and their behaviors are defined in XML text...
As part of a larger project, I had to figure out how to use node to scrape the content of a page to build a JSON file from the components using Node. Rather than scrape the page I discovered a REST API endpoint that will provide search results as JSON. This is the function I'm using to fetch the JSON, extract its components and build the new JSON object that I'll pass to other functions. It is not pretty... I'm the first one to admit that. But it does the work until I find something better : Problem Statement As...
WebP provides smaller files and better quality than equivalent JPG or PNG files. The problem is that not all browser support the WebP format, only Chromium-based browsers like Chrome, Opera, plus Edge and Firefox according to caniuse.comhttps://caniuse.com/feat=webp. There is no easy way to support browsers that support WebP and those that don't on the same page without modifying the HTML on the pages. Another option is to let the server replace images with their WebP versions for those browsers that support it. By configuring the server to replace the images, where supported, without having to change the HTML on your...
