Posts

Showing posts with the label SVG

HTML Renderer (Emacs)

Image
  Emacs: A non-intrusive browser An Elisp implementation of HTML rendering using SVG. The browser functionality is an extension of eww . For Javascript, you can use either NodeJS or QuickJS as a JS interpreter . Developer Note: The entry point is shr-render.   Table Colspan example Rowspan example Sample Table <html>   <body>     <table border="1">       <tr bgcolor="#9acd32">         <th style="text-align:left">Title</th>         <th style="text-align:left">Artist</th>       </tr>       <tr>         <td>Empire Burlesque</td>         <td>Bob Dylan</td>       </tr>     </table>   </body> </html...
Post a Comment
Read more

Text along a path (GNU Emacs)

Image
  SVG 2 specifications allows flowing text along a curve via textPath element. This opens up possibilities for cool text effects e.g. Formula Editor in GNU Emacs . GNU Emacs uses librsvg for SVG rendering on GNU/Linux. This fix for librsvg was  available in 2014 [4]. But this wasn't applied for some reason. Librsvg has moved to Rust since then. The code below is pre-Rust version of librsvg. sample.svg <?xml version="1.0" encoding="UTF-8"?> <svg height="300" width="800" xmlns="http://www.w3.org/2000/svg"      xmlns:xlink="http://www.w3.org/1999/xlink">     <path id="my_path1" d="M 50 100 Q 25 10 180 100 T 350 100 T 520 100 T 690 100" fill="transparent" />     <text>         <textPath xlink:href ="#my_path1" font-size="34"> Text along a path looks awesome!!         </textPath>     </text> </svg> ...
Post a Comment
Read more

SVG rendering of HTML in GNU Emacs

Image
For viewer-only application or for printing purposes, an HTML document can be converted into SVG in GNU Emacs. Thus you can take advantage of tabular layout and CSS.   Note: It's better to run browser as a separate process since it involves running Javascript in a sandbox environment. Rendering is the easy part - security is what makes a browser complicated.   Code: https://gitlab.com/atamariya/emacs/-/blob/dev/lisp/svg.el (load "~/svg.el")   ;; Execute following command in HTML buffer M-x svg-render-html 
Post a Comment
Read more

SVG effects in GNU Emacs

Image
Emacs is quite a capable SVG renderer - thanks to librsvg . You can render SVG filters ( blur and shadow ) and gradients ( linear and radial ) in Emacs buffer to create attractive UI as you like it. These are defined in variable image-svg-defs which can be reused using SVG fill attribute ( fill :"url(#grad1)"). The tree structure is created using speedbar . Speedbar uses ezimage to create the icons from images. In Text UI, icons are turned off. You can also turn it off by setting ezimage-use-images to nil. If you are maintaining your SVG icons as a sprite sheet, you can use <use/> tag to easily include icons. You can also look at SVG widget option for automated widget generation.   ;;  image-svg-icon assigns a default icon class to tthe image which can be suitably styled (insert-image (image-svg-icon '("bi file-x") 100 100 ".icon{stroke:red}"))   ;; Example using CSS style definition (insert-image (image-svg-icon '("bi file-x...
Post a Comment
Read more

SVG Hack for Emacs Display Engine

Image
    Here's throwing an idea into the wild ( Emacs mailing list , Reddit ). How about using SVG for rendering in the Emacs display engine? The attached image shows the rendering as a proof of concept for feasibility. The top window shows the SVG rendering of the buffer shown in the bottom window. One obvious advantage is precise positioning of content including inline popups for auto-completion. This also precludes any major changes to the display engine data structures. Other use cases include feature filled tooltips, inline completion popup, multi-column layouts, watermarks etc In this hack, the elisp code navigates from (window-start) to (window-end) reading a line of text from associated buffer and displaying the same in SVG. I've used (read-event) and (lookup-key) to allow for key translations for navigation commands. Hopefully with a tighter integration, all of this will not be required. Positioning of point is one open area. We would need the bounding box of text for ...
1 comment
Read more

SVG widget in GNU Emacs

Image
  (Top) SVG sprite sheet (Bottom) widgets from sprite sheet (Left) SVG widget in Emacs buffer Now you can use SVG widget in GNU Emacs. That is, use an SVG image or fragment as background for push-button widget in Emacs buffer. You can also specify the width and height of the widget for finer control. Generally speaking, you can use any type of image for this purpose. But SVG suits best because you can draw widget of any size without any distortion.   The ability to use SVG fragment means you can define multiple symbols in an SVG and use the same as a sprite sheet or a symbol library for your UI requirements. Thus the number of files to be managed is reduced. An SVG symbol library is a simple SVG file with each symbol as a direct descendant of the root node. Video above shows an example of such usage. Another use case would be better looking customize form. Or at the very least, rounded "Save" and "Cancel" buttons. In other words, a more visually appealing UI in grap...
Post a Comment
Read more

Draw and Scribble Notes in GNU Emacs

Image
        SVG seems to be quite handy for quick note-taking. You can easily draw simple shapes, use symbols from an SVG library and augment it with some freehand drawing. Combined with excellent keyboard editing of Emacs, you'll not miss anything while taking notes. Code: https://gitlab.com/atamariya/emacs/-/blob/dev/lisp/svg.el   Installation When you are drawing programmatically, you need to be able to track nodes by unique ids. e.g. if you call (svg-circle) followed by (svg-rect) using the same id, you should end up with an SVG rectange node. With out of the box svg.el, you'll end up with SVG circle node with attributes from (svg-rect). Hence canvas mode will not work with out of the box svg.el as is.   Till my patch which addresses this issue is merged in Emacs core (see https://lists.gnu.org/archive/html/emacs-devel/2021-09/msg00798.html ), you'll need to add following commands in your init file (~/.emacs) to use it.   ;; Assuming you have downloa...
Post a Comment
Read more