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...
The problem Statement: I want the server to deliver the right document variant based on the browser's language preferences. Browsers send an Accept-Language header which lists their preferred languages. Apache Before we configure our language negotiation parameters we need to set up things on the server. You can set this on the default httpd.conf configuration file meaning that it'll work in all virtual hosts or you can set in in each virtual host configuration meaning it'll only work for that virtual host The two items are: - LanguagePriority allows you the language precedence during content negotiation. If more than one...
One thing that has always bugged me about WordPress is that it has a GUI only administrator interface and it made it more cumbersome than it needs to be, even for simple publishing workflows like mine where I copy the Markdown text, spell check it, preview it, fix any problems in the preview and scheduled publication. WordPress CLI wp-cli adds some flexibility for command line operations for WordPress installations. It also allows you to manage remote installations of WordPress. It's not a perfect solution but it beats having to do everything through the GUI hands down. Installing As a Mac...
Streams are a very interesting concept and a new set of tools for the web. The idea is that we can read and write, depending on the type of stream we're using, chunks of content... either write them to a location or read them from a location. This will improve performance because we can start showing things to the user before it has completed loading. The example below how we can asynchronously download and display content to the user. The problem with this, if you can call it that, is that fetch will wait to download the entire file before...
Responsive images seek to answer the following question: How can we incorporate images in responsive layouts that are appropriate for a device and its resolution without loading unnecessarily large images for mobile devices? It is not always intuitive and it has taken me years to get my head wrapped around the responsive images concepts and how to build the images. The idea is that we have images sized for each type of device and we let the browser decide which one is most appropriate for the device, resolution and screen size combination like the image below shows. !How responsive images...
