Browser Graph Rendering via HTML-SVG Segmentation
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing browser rendering techniques consume excessive computing resources when rendering graphs, leading to poor performance and user frustration.
Innovation Solution
The techniques involve separating node and edge graphical elements for rendering, using HTML primitives for efficient nodes and non-HTML SVG components for edges, reducing memory, processing power, and network bandwidth demands, and employing a client-server model to optimize graph visualization in HTML browsers.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Productivity
If traditional browser rendering techniques are used to render graphs with nodes and edges, then the graphs can be displayed in HTML browsers, but the computing processes consume excessive computing resources and memory
Solution Approach 1:
The patent segments the graph rendering process into separate components: HTML primitives are used for node rendering while SVG (Scalable Vector Graphics) is used for edge rendering. This segmentation allows each component to be optimized independently, with HTML handling the simpler node elements and SVG handling the more complex edge connections, thereby reducing overall computing resource consumption while maintaining rendering capability.
2Productivity
If traditional browser rendering techniques are used to render graphs, then the graphs can be displayed in HTML browsers, but the techniques introduce user frustration and poor user experience
Solution Approach 1:
By segmenting the rendering approach to use HTML primitives for nodes and SVG for edges, the patent achieves better performance that eliminates user frustration. The segmentation enables efficient rendering that responds quickly to user interactions, improving the overall ease of operation and user experience while maintaining the ability to display complex graphs.
3Productivity
If combinations of HTML primitives and SVG components are used for graph rendering, then rendering performance improves, but the device complexity increases
Solution Approach 1:
The patent applies segmentation by dividing the graph rendering into distinct layers: HTML primitives handle node rendering and SVG handles edge rendering. This segmentation, while introducing multiple components, organizes the complexity in a manageable way where each component has a specific, well-defined role, making the system easier to maintain and optimize compared to a monolithic rendering approach.
Solution Approach 2:
The patent leverages the universality of web standards by using both HTML primitives and SVG, which are widely supported across different browsers and platforms. This multi-functional approach allows the same rendering system to work across various environments without requiring platform-specific implementations, thereby managing complexity through standardization.
4Productivity
If traditional graph rendering is performed in browsers, then graphs can be visualized, but network bandwidth use and inter-component communication demands increase
Solution Approach 1:
By segmenting the graph data into nodes (HTML) and edges (SVG), the patent enables more efficient data transmission and processing. The segmented approach allows for optimized data structures and rendering pipelines that reduce redundant data transmission over the network, thereby reducing network bandwidth consumption while improving rendering efficiency.
Data Source
AI summary
Systems for rendering graphs in browsers. A method embodiment for generating and manipulating a high-performance graph in a browser commences by receiving a set of node descriptions of the graph as well as a set of edge descriptions of the graph. In a first display layer, one or more HTML primitives are assigned to the individual ones of the set of nodes. In a second display layer, one or more non-HTML display graphical elements are assigned to the individual ones of the set of edges. The edges and nodes are sorted into a painting order based on size. The first layer and the second layer are combined into an HTML document that comprises at least some of the HTML primitives that correspond to the nodes as well as at least some of the non-HTML display graphical elements that correspond to the edges of the graph. The browser renders the graph.